Maison > Article > interface Web > Partagez la solution au conflit entre l'événement jquery dblclick et click

Partagez la solution au conflit entre l'événement jquery dblclick et click

黄舟original: 2017-06-27 10:42:002001parcourir

Dans jquery click et dblclick sont tous deux des événements de clic, mais dans l'événement dblclick est un clic répété sur l'événement de clic, donc si nous le faisons en même temps, ce sera conflit, comme suit Regardons l'analyse.

Dans l'événement double-clic (dblclick), parmi les deux événements clic (click) déclenchés, le premier événement clic (click) sera bloqué, mais pas le second.

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

C'est-à-dire qu'un événement de double-clic (dblclick) renverra un résultat d'événement de clic (clic) et un résultat d'événement de double-clic (dblclick). Au lieu du résultat d'un événement de double-clic (dblclick) et du résultat de deux événements de clic (clic).

dblclick() Lorsqu'un élément est double-cliqué, l'événement dblclick se produit. Un clic se produit lorsque le pointeur de la souris se trouve sur un élément et que le bouton gauche de la souris est enfoncé puis relâché. Si deux clics se produisent dans un court laps de temps, il s'agit d'un événement de double clic.

<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>

Dans ce cas, éliminez simplement l'événement de clic supplémentaire (clic) et le problème sera résolu.

var timer = null; 
$(&#39;button&#39;).live(&#39;click&#39;, function(event){ 
    timer && clearTimeout(timer); 
    timer = setTimeout(function(){ 
        console.log(event.type); 
    },300); 
}).live(&#39;dblclick&#39;, function(event){ 
    timer && clearTimeout(timer); 
    console.log(event.type); 
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de la fonction .dblclick() dans jQueryArticle suivant：Explication détaillée de l'utilisation de la fonction .dblclick() dans jQuery

Articles Liés

Voir plus