Étiquette : click

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

01/02/2022 / admin

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

déléguer un événement à un élément du DOM créé dynamiquement
détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

<div id="combinationSummaryList">
    <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>
    <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément -->
</div>

<a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>

<a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a>

</div>

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-link' ) ) return;
    event.preventDefault();
    // code à exécuter
}, false );

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-link' ) ) return;

event.preventDefault();

// code à exécuter

}, false );

Javascript dans le cas d’un SVG:

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;
        event.preventDefault();
        const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );
}, false );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;

event.preventDefault();

const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );

}, false );

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

16/06/2020 / admin

Exemple d’utilisation: les cartes (items) catégories ou produits du listing catégories ou produits.

Rendre toute une zone cliquable, plutôt qu’uniquement le lien qu’elle contient. Exemple: une carte produit dans le listing produit. app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml.

Utilisation dans un fichier PHTML:

    // <script type="text/x-magento-init">
    //     {
    //         // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)
    //         ".product-item": {
    //             // Alias de ce plug-in
    //             "zoneClick": {
    //                 // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")
    //                 "targetElement": "a.product-item-link",
    //                 // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.
    //                 // Renseigner les IDs ou classes de ces liens ici.
    //                 // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.
    //                 "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]
    //             }
    //         }
    //     }
    // </script>

// <script type="text/x-magento-init">

// {

// // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)

// ".product-item": {

// // Alias de ce plug-in

// "zoneClick": {

// // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")

// "targetElement": "a.product-item-link",

// // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.

// // Renseigner les IDs ou classes de ces liens ici.

// // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.

// "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]

// }

// </script>

Détail des fichiers à mettre en place:

app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js

define([
    "jquery"
], function($) {
    "use strict";

    return function (options, element) {
        $(element).on('click', function (event) {
            let $this = $(this),
                $clickedElement = $(event.target),
                excludeAmount = options.exclude.length,
                testExclude = [];

            // On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:
            let i;
            for (i = 0; i < excludeAmount; i++){
                if ($clickedElement.is(options.exclude[i])) {
                    testExclude.push(1);
                } else {
                    // nada ...
                }
            }

            if (testExclude.length > 0) {
                // Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.
                testExclude = [];
            } else {
                // Sinon, on redirige vers la page cible.
                window.location = $this.find(options.targetElement).attr('href');
                return false;
            }
        });
    };
});
// https://www.siphor.com/different-ways-using-javascript-magento-2/
// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

define([

"jquery"

], function($) {

"use strict";

return function (options, element) {

$(element).on('click', function (event) {

let $this = $(this),

$clickedElement = $(event.target),

excludeAmount = options.exclude.length,

testExclude = [];

// On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:

let i;

for (i = 0; i < excludeAmount; i++){

if ($clickedElement.is(options.exclude[i])) {

testExclude.push(1);

} else {

// nada ...

}

if (testExclude.length > 0) {

// Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.

testExclude = [];

} else {

// Sinon, on redirige vers la page cible.

window.location = $this.find(options.targetElement).attr('href');

return false;

}

});

};

});

// https://www.siphor.com/different-ways-using-javascript-magento-2/

// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

Note: pour être sûr de ce que vous allez renseigner en paramètre exclude, vous pouvez ajouter dans le code ci-dessus un console.log($clickedElement.attr('class'));. Puis allez en front et cliquez sur les éléments à exclure. Les classes qui leur sont affectées apparaîtront en console (F12).

Déclaration via requireJS: app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        "*": {
            zoneClick: 'js/zone-click'
        }
    }
};

var config = {

map: {

"*": {

zoneClick: 'js/zone-click'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml

        <script type="text/x-magento-init">
            {
                ".product-item": {
                    "zoneClick": {
                        "targetElement": "a.product-item-link",
                        "exclude": [ ".icon-addtocart.icon" ]
                    }
                }
            }
        </script>

{

".product-item": {

"zoneClick": {

"targetElement": "a.product-item-link",

"exclude": [ ".icon-addtocart.icon" ]

}

</script>

[jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas

30/10/2019 / admin

Solution: stevenwanderski/bxslider-4: links in sliders aren’t working – Error in the latest version of Chrome (73.0.3683.75).

I might have found a reliable fix for this. The problem happens in Chrome because it doesn’t fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn’t fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

        if (slider.viewport.get(0).setPointerCapture) {
          slider.pointerId = orig.pointerId;
          slider.viewport.get(0).setPointerCapture(slider.pointerId);
        }

if (slider.viewport.get(0).setPointerCapture) {

slider.pointerId = orig.pointerId;

slider.viewport.get(0).setPointerCapture(slider.pointerId);

}

to this:

        if (e.target.setPointerCapture) {
          slider.pointerId = orig.pointerId;
          e.target.setPointerCapture(slider.pointerId);
        }

if (e.target.setPointerCapture) {

slider.pointerId = orig.pointerId;

e.target.setPointerCapture(slider.pointerId);

}

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

08/04/2019 / admin

Ressources en ligne: Setting “checked” for a checkbox with jQuery?

<td class="col-damaged col-boolean" onClick="$(this).booleanIntent(event);">
  <input type="checkbox" id="product_00001_damaged" name="product_00001" />
</td>

</td>

ATTENTION: l’utilisation de $(this) dans la fonction pour récupérer l’élément cliqué empêche le clic sur l’élément <input type="checkbox" /> lui-même! On préférera utiliser event.target pour cibler l’élément cliqué.

Code non commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      return false;
    } else {
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');

      if ( CHECKED_VALUE != true ) {
        $_INPUT.prop('checked', true);
      } else {
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

return false;

} else {

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

if ( CHECKED_VALUE != true ) {

$_INPUT.prop('checked', true);

} else {

$_INPUT.prop('checked', false);

}

Code commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      console.log('is input');
      return false;
    } else {
      console.log('is not input');
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');
      console.log('CHECKED_VALUE: '+CHECKED_VALUE);

      if ( CHECKED_VALUE != true ) {
        console.log('input is not checked, so we check it');
        $_INPUT.prop('checked', true);
      } else {
        console.log('input is checked, so we uncheck it');
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

console.log('is input');

return false;

} else {

console.log('is not input');

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

console.log('CHECKED_VALUE: '+CHECKED_VALUE);

if ( CHECKED_VALUE != true ) {

console.log('input is not checked, so we check it');

$_INPUT.prop('checked', true);

} else {

console.log('input is checked, so we uncheck it');

$_INPUT.prop('checked', false);

}

[jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments

11/10/2017 / admin

Source: jQuery bind click *ANYTHING* but *ELEMENT*

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

$('#special').on('click', function(e) {

e.stopPropagation();

});

$(document).on('click', function (e) {

// Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.

});

Annuler les effets d’event.stopPropagation()

Source: How to undo event.stopPropagation in jQuery?

var stop = false;
// do your logic here
if(stop){
    event.stopPropagation();
}

var stop = false;

// do your logic here

if(stop){

event.stopPropagation();

}

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

Utiliser la méthode .off().

$(document).on('click', function(e) {
  console.log("This will be displayed only once.");
  $(this).off(e);
});

$(document).on('click', function(e) {

console.log("This will be displayed only once.");

$(this).off(e);

});

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

16/03/2017 / admin

Case à cocher (checkbox)

En cliquant sur div#loyaltyCardForm, on active la checkboxe input#offerLoyaltyCard

<div id="loyaltyCardForm" class="loyalty-card-form">
    <div class="loyalty-card-form-checkbox">
        <input type="checkbox" name="offerLoyaltyCard" id="offerLoyaltyCard" value="1"/>
    </div>
    <div class="loyalty-card-form-label">
        <label for="offerLoyaltyCard">
            <span class="tagline tagline-row-1">
                <spring:theme code="naos.product.loyaltycard.offer.title" />
            </span><br/>
            <span class="tagline tagline-row-2">
                <spring:theme code="naos.product.loyaltycard.offer.message" />
            </span>
        </label>
    </div>
</div>

</div>

<spring:theme code="naos.product.loyaltycard.offer.title" />

</span><br/>

<spring:theme code="naos.product.loyaltycard.offer.message" />

</span>

</label>

</div>

var $offerLoyaltyCard = $('#offerLoyaltyCard');
$('#loyaltyCardForm').on('click', function(){
    if(!$('#offerLoyaltyCard').is(':checked')){
        $offerLoyaltyCard.prop('checked', true);
    } else {
        $offerLoyaltyCard.prop('checked', false);
    }
});

var $offerLoyaltyCard = $('#offerLoyaltyCard');

$('#loyaltyCardForm').on('click', function(){

if(!$('#offerLoyaltyCard').is(':checked')){

$offerLoyaltyCard.prop('checked', true);

} else {

$offerLoyaltyCard.prop('checked', false);

}

});

Bouton radio

Source: Toggling Radio Buttons with jQuery et jsFiddle.

Avec 2 boutons radio seulement

Source: jsFiddle.

<button id="toggler">click me</button><br>
<input type="radio" name="speeds" value="fast" checked>fast<br>
<input type="radio" name="speeds" value="slow">slow<br>

<button id="toggler">click me</button><br>

$('#toggler').click(function() {
    $('input[type="radio"]').not(':checked').prop("checked", true);
});

$('#toggler').click(function() {

$('input[type="radio"]').not(':checked').prop("checked", true);

});

Avec plus que 2 boutons radio

Source: jsFiddle.

<button id="toggler">click me</button><br>
<input type="radio" name="speeds" value="fast" checked>fast<br>
<input type="radio" name="speeds" value="medium">medium<br>
<input type="radio" name="speeds" value="slow">slow<br>

<button id="toggler">click me</button><br>

<input type="radio" name="speeds" value="medium">medium<br>

var $radios = $('input[type="radio"][name="speeds"]')
$('#toggler').click(function() {
    var $checked = $radios.filter(':checked');
    var $next = $radios.eq($radios.index($checked) + 1);
    if(!$next.length){
        $next = $radios.first();
    }
    $next.prop("checked", true);
});

var $radios = $('input[type="radio"][name="speeds"]')

$('#toggler').click(function() {

var $checked = $radios.filter(':checked');

var $next = $radios.eq($radios.index($checked) + 1);

if(!$next.length){

$next = $radios.first();

}

$next.prop("checked", true);

});

[jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)

21/12/2016 / admin

Problème : l’élément sur lequel on souhaite placer le click n’accepte qu’un seul événement (on ne peut cliquer qu’une fois dessus. Au-delà, le clic ne fonctionne plus. Embêtant quand on veut faire de l’ouvrir/fermer…).

Solution: doubler l’élément sur lequel se fait l’événement click.

<div class="offer-benefit-heading">
    <h2>Les avantages du pack Premium</h2>
    <span class="more">
        <span class="open">&gt; En savoir plus</span>
        <span class="close">&gt; En savoir plus</span>
    </span>
</div>
<div class="offer-benefit" data-display="hidden">
    [...]
</div>

<h2>Les avantages du pack Premium</h2>

<span class="open">> En savoir plus</span>

<span class="close">> En savoir plus</span>

</span>

</div>

[...]

</div>

.offer-benefit{
    &[data-display="hidden"]{
        display: none;
    }
    &[data-display="shown"]{
        // nada 
    }
}

.offer-benefit{

&[data-display="hidden"]{

display: none;

}

&[data-display="shown"]{

// nada

}

    jQuery(document).ready(function(){
        var eClose = jQuery('.more .close');
            eOpen = jQuery('.more .open');
            eOfferBenefitHeading = jQuery('.offer-benefit-heading');
            eOfferBenefit = jQuery('.offer-benefit');

        eClose.hide();
        eOfferBenefitHeading.on('click', '.open', function(){
            eClose.show();
            eOpen.hide();
            eOfferBenefit.attr('data-display', 'shown');
        });
        
        eOfferBenefitHeading.on('click', '.close', function(){
            eClose.hide();
            eOpen.show();            
            eOfferBenefit.attr('data-display', 'hidden');
        });
    });

jQuery(document).ready(function(){

var eClose = jQuery('.more .close');

eOpen = jQuery('.more .open');

eOfferBenefitHeading = jQuery('.offer-benefit-heading');

eOfferBenefit = jQuery('.offer-benefit');

eClose.hide();

eOfferBenefitHeading.on('click', '.open', function(){

eClose.show();

eOpen.hide();

eOfferBenefit.attr('data-display', 'shown');

});

eOfferBenefitHeading.on('click', '.close', function(){

eClose.hide();

eOpen.show();

eOfferBenefit.attr('data-display', 'hidden');

});

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

29/08/2016 / admin

Source : Prevent jQuery events from firing multiple times, ou ma demo qui fonctionne sur jsFiddle.

Problème : ma demo qui ne fonctionne pas sur jsFiddle. J’attribue un événement Click sur un élément (dans ma demo, le lien « Lorem ipsum » par exemple). Lorsque je clique une première fois sur cet élément, l’événement Click se produit une fois. Lorsque je modifie la largeur de la fenêtre (passage à une autre vue) et que je clique une seconde fois sur ce même élément, l’événement Click se produit 2 fois, et ainsi de suite …

Solution :

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

$(document).on('pagebeforeshow', '#index', function(){

$(document).off('click', '#test-button').on('click', '#test-button',function(e) {

alert('Button click');

});

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

10/02/2016 / admin

Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.

Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.

Utiliser ce code :

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.

More explanation :

.nav a is the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class $('#nav a')
.navbar-to-collapse is the value for data-target=".navbar-to-collapse" and you can modify it to the data-target you use.

So a complete example (for illustrating ) should be like that:

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</ul>

</div>

</div>

</nav>

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

[jQuery] Au clic sur un élément, scroller automatiquement jusqu’à un autre élément présent dans le DOM

13/08/2015 / admin

…en utilisant les méthodes .click, animate., .scrollTop et .offset.

Source : jQuery scroll to element et hyperlink – JQuery smooth scrolling when clicking an anchor link.

<a id="myLink">Cliquez ici ...</a>
<div>
    <!-- beaucoup de code -->
</div>
<div id="myTarget">... et un scroll vous emmènera automatiquement ici !</div>

<a id="myLink">Cliquez ici ...</a>

<div>

</div>

<div id="myTarget">... et un scroll vous emmènera automatiquement ici !</div>

jQuery('a#myLink').on('click', function(){
  jQuery('a[href*="myTarget"]').click();
  jQuery('html, body').animate({
      scrollTop: jQuery("#myTarget").offset().top
  }, 500);
  return false;
});

jQuery('a#myLink').on('click', function(){

jQuery('a[href*="myTarget"]').click();

jQuery('html, body').animate({

scrollTop: jQuery("#myTarget").offset().top

}, 500);

return false;

});

Articles récents

Catégories

Archives

Méta

Étiquette : click

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

Javascript dans le cas d’un SVG:

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

[jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

Code non commenté

Code commenté

[jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments

Annuler les effets d’event.stopPropagation()

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

Case à cocher (checkbox)

Bouton radio

Avec 2 boutons radio seulement

Avec plus que 2 boutons radio

[jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

[jQuery] Au clic sur un élément, scroller automatiquement jusqu’à un autre élément présent dans le DOM