Partagez la solution au conflit entre l'événement jquery dblclick et click-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-27 10:42:00

original

1970 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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); 
});

Copier après la connexion

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!