使用document.onclick会覆盖其他onclick事件 [英] using document.onclick overrides other onclick events
本文介绍了使用document.onclick会覆盖其他onclick事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用document.onclick事件在Javascript中隐藏div弹出窗口，将覆盖我的其他按钮单击事件.我尝试了a来捕获元素ID，然后触发按钮单击，但是那也不起作用.
任何想法如何停止它并仍然使我的按钮单击起作用?
Using document.onclick event to hide a div popup in Javascript, overrides my other button click events. I tried a to capture the element id and then trigger the button click, but that didnt work either.
Any idea how to stop this and still have my button clicks work ?
推荐答案
诀窍是使用addEventListener.在HTML中添加功能意味着该功能是匿名的，如果不设置onclick =''''就无法删除.
使用addEventListener意味着您可以将多个处理程序附加到一个事件.这也意味着您以后可以有选择地删除它们.
我要指出的是，AFAIK在我按func1，func2的顺序添加它们时，浏览器没有义务按此顺序执行它们.
The trick is to use addEventListener. Adding a function in the HTML means the function is anonymous and can''t be removed without setting onclick=''''.
Using addEventListener means you can attach multiple handlers to an event. It also means that you can selectively remove them later.
I should point out that, AFAIK while I added them in the order func1, func2, the browser is under no obligation to execute them in this order.
<html>
<head>
<style>
</style>
<script>
function func1()
{
// hello world! #1
alert('func1');
}
function func2()
{
// hello world! #2
alert('func2');
// get the button and remove the func1 handler
// this means we'll see 2 alert boxes the first time round 'func1' then 'func2'
// but any subsequent clicks will only trigger 1 alert-box 'func2'
var btnElement = document.getElementById('myBtn');
btnElement.removeEventListener('click', func1, false);
}
function myInit()
{
var btnElement = document.getElementById('myBtn');
btnElement.addEventListener('click', func1, false);
btnElement.addEventListener('click', func2, false);
}
</script>
</head>
<body onload='myInit();'>
<input id='myBtn' value='click me' type='button'/>
</body>
</html>
像这样的东西吗?
Something like this perhaps?
<!DOCTYPE html>
<html>
<head>
<style>
/* just something to let us see where it is */
#showMe
{
width: 200px;
height: 75px;
border: solid 3px red;
}
</style>
<script>
function byId(e){return document.getElementById(e);}
// flag used in the onmouseout and onmouse over listeners for the 'Show/Hide' btn
// used to ensure we only have 1 valid listener at a time. If mouse enters button, no need to listen for body mouse-clicks
// if mouse leaves button, no need to listen for button clicks
// (prevents both the btnClick and bodyClick functions firing when the pop-up is shown and the button is clicked - 2 events
// means the pop-up is closed then opened again - albeit too fast to see. The pop-up appears to remain motionless/unchanged.
var isVisible = false;
// handle cliks on the show/hide button
// just toggle the visible state
function btnClick(e)
{
var tgt = document.getElementById('showMe');
switch (isVisible)
{
case false:
tgt.style.display = '';
isVisible = true;
break;
default:
tgt.style.display = 'none';
isVisible = false;
}
}
// handle clicks on the document body
//
// first make sure we don't come from a click on either the show/hide button or the popup itself.
// then re-attach the listener to the button and remove it from the body. - clicking the body with the popup close
// should do nothing. Clicking the button on the other hand, definitely should do something
function bodyClick(e)
{
e = e || event;
var tgt = document.getElementById('showMe');
if ( ( e.srcElement != byId('showMe')) && (e.srcElement != byId('mBtn')) )
{
tgt.style.display = 'none';
isVisible = false;
document.removeEventListener('click', bodyClick, true);
byId('mBtn').addEventListener('click', btnClick, true);
}
}
function myInit()
{
// fire the event whenever we click the show/hide btn
byId('mBtn').addEventListener('click', btnClick, true);
byId('mBtn').addEventListener(
'mouseover',
function()
{
if (isVisible)
{
document.removeEventListener('click', bodyClick, true);
byId('mBtn').addEventListener('click', btnClick, true);
}
},
true);
byId('mBtn').addEventListener(
'mouseout',
function()
{
if (isVisible)
{
document.addEventListener('click', bodyClick, true);
byId('mBtn').removeEventListener('click', btnClick, true);
}
},
true);
}
</script>
</head>
<body onload='myInit();'>
<input id='mBtn' type='button' value='Show/Hide'/>
<div id='showMe' style='display: none;'>
I contain hidden content. Pop-me-up!
</div>
<br>
<input type='button' onclick='alert("Hello World!");' value='test alert(...)'/>
</body>
</html>
这篇关于使用document.onclick会覆盖其他onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
