V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
whatisnew
V2EX  ›  JavaScript

大牛都来看一下 JavaScript 事件处理

  •  
  •   whatisnew · 2015-04-25 17:25:35 +08:00 · 3081 次点击
    这是一个创建于 3500 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一个链接指向文件本身:

    <!-- 文件 index.html -->
    <a href="index.html" class="clickme">index.html</a>
    

    点击这个链接时,console 一下 clicked

    $(document).on('click', 'a.clickme', function() {
      console.log('clicked');
    });
    

    但是问题是,
    点1次 console一次,点2次 console 2次,点3次 console 3次,点4次。。。
    这是什么情况。。。 用了 requirejs

    12 条回复    2015-04-26 05:55:18 +08:00
    MinonHeart
        1
    MinonHeart  
       2015-04-25 17:33:06 +08:00 via Android
    点几次就出几次,这有什么问题?
    rming
        2
    rming  
       2015-04-25 17:33:38 +08:00
    难道有什么不对的地方么
    whatisnew
        3
    whatisnew  
    OP
       2015-04-25 17:38:43 +08:00
    @rming
    @MinonHeart

    他是在原有的 console 的基础上 log 出来 n 次。

    比如,点3次,那么就是 log 出来 1+2+3 次
    ALeo
        4
    ALeo  
       2015-04-25 17:42:26 +08:00
    那就要看看你的html中是不是只有一个`a.clickme`的标签了。。
    whatisnew
        5
    whatisnew  
    OP
       2015-04-25 17:45:31 +08:00
    jQuery 有一个 unbind() 可以解决这个问题,但是我很好奇他是为什么发生的
    mikumikumoe
        6
    mikumikumoe  
       2015-04-25 17:48:42 +08:00
    点了链接后代码又被加载了一次?
    whatisnew
        7
    whatisnew  
    OP
       2015-04-25 17:50:03 +08:00
    event.stopImmediatePropagation(); 也可以解决这个问题

    但是这个问题怎么发生的?一般来说不需要 unbind 或者 stopImmediatePropagation 的
    whatisnew
        8
    whatisnew  
    OP
       2015-04-25 17:54:58 +08:00
    是不是因为我用 requirejs 加载的时候,每一次 requirejs 都 new 一个事件,然后,以前的事件没有注销,所以会出现这样的情况呢?
    xavierchow
        9
    xavierchow  
       2015-04-25 20:15:59 +08:00   ❤️ 1
    你贴的两段代码提供不了全部信息,如我示例https://gist.github.com/xavierchow/157c05b7fea5f28854b4
    不会出现你的问题。
    感觉你的事件handler重复注册了,我有两个问题:
    1. a标签指向自己,点了后页面有跳转吗?是否还有别的处理?如果整页刷新的话新的DOM新的Handler应该不会出现你的问题。
    2. 我猜测是你的页面没有刷新,但是这段注册事件的脚本反复被执行了,在`$(document).on`的外面加console.log检查注册了几次?
    solupro
        10
    solupro  
       2015-04-25 20:29:28 +08:00   ❤️ 1
    代码贴得不全,按你说法估计是事件被重复绑定了
    NeoAtlantis
        11
    NeoAtlantis  
       2015-04-25 20:45:20 +08:00   ❤️ 1
    我想问题还是出在他那个链接指向的是页面本身。。。这样点了之后也许因为什么原因事件就又绑定了一次。。。
    whatisnew
        12
    whatisnew  
    OP
       2015-04-26 05:55:18 +08:00
    @xavierchow
    @NeoAtlantis
    @solupro

    多谢各位大神的回复,问题已解决。
    睡了一觉起来,精神好很多。然后发现我是在一个 requirejs 加载进来的对象内,调用对象本身的一个方法,去绑定一个实时事件,所以,会产生多重绑定,事件绑定放在绑定对象外就可以了。
    哈哈。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2732 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:12 · PVG 20:12 · LAX 04:12 · JFK 07:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.