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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4073 days ago, the information mentioned may be changed or developed.

一个链接指向文件本身：

<!-- 文件 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

index.html

console

clicked

12 replies • 2015-04-26 05:55:18 +08:00

MinonHeart

Apr 25, 2015 via Android

点几次就出几次，这有什么问题？

rming

Apr 25, 2015

难道有什么不对的地方么

whatisnew

Apr 25, 2015

@rming
@MinonHeart

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

比如，点3次，那么就是 log 出来 1+2+3 次

ALeo

Apr 25, 2015

那就要看看你的html中是不是只有一个`a.clickme`的标签了。。

whatisnew

Apr 25, 2015

jQuery 有一个 unbind() 可以解决这个问题，但是我很好奇他是为什么发生的

mikumikumoe

Apr 25, 2015

点了链接后代码又被加载了一次?

whatisnew

Apr 25, 2015

event.stopImmediatePropagation(); 也可以解决这个问题

但是这个问题怎么发生的？一般来说不需要 unbind 或者 stopImmediatePropagation 的

whatisnew

Apr 25, 2015

是不是因为我用 requirejs 加载的时候，每一次 requirejs 都 new 一个事件，然后，以前的事件没有注销，所以会出现这样的情况呢？

xavierchow

Apr 25, 2015

你贴的两段代码提供不了全部信息，如我示例https://gist.github.com/xavierchow/157c05b7fea5f28854b4
不会出现你的问题。
感觉你的事件handler重复注册了，我有两个问题：
1. a标签指向自己，点了后页面有跳转吗？是否还有别的处理？如果整页刷新的话新的DOM新的Handler应该不会出现你的问题。
2. 我猜测是你的页面没有刷新，但是这段注册事件的脚本反复被执行了，在`$(document).on`的外面加console.log检查注册了几次？

solu

Apr 25, 2015

代码贴得不全，按你说法估计是事件被重复绑定了

NeoAtlantis

Apr 25, 2015

我想问题还是出在他那个链接指向的是页面本身。。。这样点了之后也许因为什么原因事件就又绑定了一次。。。

whatisnew

Apr 26, 2015

@xavierchow
@NeoAtlantis
@solupro

多谢各位大神的回复，问题已解决。
睡了一觉起来，精神好很多。然后发现我是在一个 requirejs 加载进来的对象内，调用对象本身的一个方法，去绑定一个实时事件，所以，会产生多重绑定，事件绑定放在绑定对象外就可以了。
哈哈。