[英]click event fires twice (not by jQuery)
I wrote small piece of code which should toggle reporting box on my page. 我写了一小段代码,应该在页面上切换报告框。 It's one function attached to click event of 2 elements (well - I know, the solution is to separate this function into 2, but I want to understand problem with this function).
它是附加到2个元素的click事件的一个函数(嗯-我知道,解决方案是将此函数分成2个,但我想了解此函数的问题)。 The problem is that at closing function is fired twice and box don't want to disappear.
问题在于,关闭函数会被触发两次,并且框不想消失。
function overlayInit() {
var rep = document.createElement("div");
rep.setAttribute('id','reportbug');
document.body.appendChild(rep);
toggleReporter();
}
function toggleReporter(ev) {
var e = document.getElementById('reportbug');
if(ev)
{
console.log(ev);
}
else
{
console.log('notarget');
}
if (e.hasClass('collapsed'))
{
console.log('Extending');
e.removeClass('collapsed');
e.addClass('expanded');
e.removeEventListener('click',toggleReporter);
e.innerHTML =
'<h5>Wyraź swoją opinię na temat tej strony</h5>'+
'<button class="text" id="closeRep">[× zamknij]</button>'+
'<form action="reportbug" method="post">'+
'<textarea name="cont" style="width:100%;font:14px Verdana,sans-serif;height:100px;">'+
'</textarea><br />'+
'<input type="submit" value="Wyślij" />'+
'</form>'
;
// Double fired
document.getElementById('closeRep').addEventListener('click',toggleReporter);
}
else
{
console.log('Collapsing');
if ( e.hasClass('expanded') )
{
console.log('Removing events');
e.removeClass('expanded');
document.getElementById('closeRep').removeEventListener('click',toggleReporter);
}
e.addClass('collapsed');
e.addEventListener('click',toggleReporter);
e.innerHTML = 'Wyraź opinię';
}
}
document.addEventListener("DOMContentLoaded", overlayInit, false);
Problem occurs on FF10.0.2 on Ubuntu. 在Ubuntu上的FF10.0.2上出现问题。
I discovered that 2 fired events have one difference - event.eventPhase
(first 2
, second 3
). 我发现2个被
event.eventPhase
事件有一个区别 - event.eventPhase
(前2
,后3
)。
I really don't know what I should write here other than directing to quirksmode - events order ... 除了指向quirksmode之外,我真的不知道我应该写什么- 事件顺序 ......
It is because of the way javascript events are defined by the W3C - they bubble up and down the DOM tree upon to the element that captures the event. 这是因为JavaScript事件是由W3C定义的方式-他们泡起来,到时捕捉事件的元素下的DOM树。
So, either use jQuery which handles it for you, or use e.stopPropagation()
or (as Sheikh said) window.event.cancelBubble = true
. 所以,要么使用jQuery为你处理它,要么使用
e.stopPropagation()
或(如Sheikh所说) window.event.cancelBubble = true
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.