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一样的结果。

  • 相关阅读:
    XMU1349 xmu_1349
    字符串排序
    linux磁盘文件与目录管理系统(2)
    poj 3667 Hotel
    poj 3468 A Simple Problem with Integers
    linux文与目录管理
    Linux的磁盘与文件管理系统(1)
    hdu 1698 Just a Hook
    poj3225 Help with Intervals
    poj 2886Who Gets the Most Candies?
  • 原文地址:https://www.cnblogs.com/gxp69/p/7262679.html
Copyright © 2011-2022 走看看