É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)

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.

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

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:

Détail des fichiers à mettre en place:

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

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

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

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

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:

to this:

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

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

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é


Code commenté

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

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

Annuler les effets d’event.stopPropagation()

Source: How to undo event.stopPropagation in jQuery?

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

Utiliser la méthode .off().

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

Case à cocher (checkbox)

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


Bouton radio

Source: Toggling Radio Buttons with jQuery et jsFiddle.

Avec 2 boutons radio seulement

Source: jsFiddle.

Avec plus que 2 boutons radio

Source: jsFiddle.

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

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.

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

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 :

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

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 :

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 :

  1. .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')
  2. .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:

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

…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.