zoukankan      html  css  js  c++  java
  • jQuery 嵌套 event 会触发多次的原因

    Html代码如下:

    <div id="cover">
      <input type="button" id="inside" value="submit_inside" />
    </div>
    <div id="cover_js">
       <input type="button" id="inside_js" value="submit_inside_js" />
    </div>
    <input type="button" id="outside" value="submit_outside" />

    jQuery代码如下:

    $('#cover').mouseover(function () {
      $('#inside').click(function () {
        alert('multiple times');
      });    
    });
    
    $('#cover_js').mouseover(function () {
      document.getElementById('inside_js').onclick = function () {
        alert('just one time');
      }    
    });
    
    $('#outside').click(function () {
      alert('just one time');
    });

    id 为 inside 的按钮的 click 事件被嵌套在 div 的鼠标事件内,而 id 为 outside 的按钮则未嵌套,分别对两个按钮进行多次点击后,inside 按钮绑定的 click 事件会进行累加,而 outside 按钮则仍旧只绑定一个 click 事件。id 为 inside_js 的按钮的 click 事件也被嵌套在 div 的鼠标事件内,但是我用 javascript 实现 click,此时点击多次后,只触发一个 alert。
    解决上述问题可以用 unbind 对嵌套 event 进行解绑:

    $('#cover').mouseover(function () {
      $('#inside').off.('click').click(function () {
        alert('multiple times');
      });    
    });

    原因:

    jQuery所有的事件(.click.mouseover.hover 等等)都是通过on =>  event.add  =>  addEventListener,来实现的。

    代码每次mouseover的时候就多绑定了一次事件回调。
    原生的onclick每次赋值都直接覆盖了之前的onclick绑定,所以不推荐这样写。
    若是用原生的addEventListener也会得到跟jQuery一样的结果。

  • 相关阅读:
    A linked list is given such that each node contains an additional random pointer which could point to any node in the list or null. Return a deep copy of the list.
    leetcode算法
    leetcode
    UVA 11076 Add Again
    UVA 10892 LCM Cardinality
    HDU 5961 传递
    UVALive 7040 Color
    2014ACM/ICPC亚洲区广州站题解
    HDU 5136 Yue Fei's Battle
    HDU 5129 Yong Zheng's Death
  • 原文地址:https://www.cnblogs.com/gxp69/p/7262679.html
Copyright © 2011-2022 走看看