Question

使用布尔值确定是否单击了子元素是不是一个坏主意？有没有更好的方法？

注意：我不想为此使用jquery。

见下面的代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{margin:0;}
#container{height:300px;background:red}
#box{width:500px;height:300px;background:blue;margin:auto}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script>
var hbWindow = window,
    hbDocument = document,
    hbBooleanIfIsOutside = new Boolean(),
    hbIdBox = hbDocument.getElementById('box'),
    hbIdContainer = hbDocument.getElementById('container');

hbWindow.onload = function () {

    hbIdContainer.onclick = function () {
        if(hbBooleanIfIsOutside) {
            alert('you\'re outside!');
        } else {
            alert('you\'re inside!');
        }
        hbBooleanIfIsOutside = true;
    }

    hbIdBox.onclick = function () {
        hbBooleanIfIsOutside = false;
    }

}
</script>
</body>
</html>

添加了新版本：

在这个版本中，我使用的是addEventListener。

var hbWindow = window,
    hbDocument = document,
    hbIdBox = hbDocument.getElementById('box'),
    hbIdContainer = hbDocument.getElementById('container');

hbWindow.onload = function () {

function inOrOut(e){
    if (!e) e = hbWindow.event;
    if((e.target || e.srcElement).id == 'container') {
        alert('you\'re outside!');
    } else {
        alert('you\'re inside!');
    }
}

hbIdContainer.addEventListener('click', inOrOut, false);

}

Answer 1

如果您想知道调用点击的内容，请检查event.target。在IE6-8上，您将检查window.event.srcElement属性。

if ( document.body.addEventListener ) {
  document.body.addEventListener("click", alertMe, false);
} else if ( document.body.attachEvent ) {
  document.body.attachEvent("onclick", alertMe);
}

function alertMe(event) {
  console.log( event.target || window.event.srcElement.nodeName );
}

因此，当我们将事件附加到document.body时，我们可以通过target（或在某些情况下srcElement）确定哪个孩子触发了点击。< / p>

演示：http://jsbin.com/oxuzek/7/edit

如果是子元素，请阻止单击

1 个答案: