Question

我正在尝试创建一个javascript，当你点击屏幕上的任何地方但是在一个对象上时，它会执行一些代码。（关闭对话框，删除夜间模式等）

//Imagine some CSS declaring that FPAGE takes up 100% of the screen.
<div id="FPAGE" onclick="return outClick();">
    <script>
        function outClick() {
            var o=document.getElementsByClassName('objects');
            //What now?
        }
    </script>
    <center>
        <object class="objects" width="500px" height="500px"></object>
        <br />
        <object class="objects" width="500px" height="500px"></object>
    </center>
</div>

我真的不确定我应该做什么。我想过一些sudo代码，但我不知道这是否可以在javascript中完成。

var o=document.getElementsByClassName('objects');
//What now?
if (onclick!=o) {
    //insert code here
}

解决方案：（感谢大卫）

<script>
document.onclick = function(e) {
    var o=document.getElementsByClassName('objects');
    if ( e.target.nodeName != 'o' ) {
        //Code here!
    }
};
</script>
<center>
    <object class="objects" width="500px" height="500px"></object>
    <br />
    <object class="objects" width="500px" height="500px"></object>
</center>
</div>

Answer 1

您可以在整个页面上添加点击事件，然后检查该点击的目标是否是该对象（或者该对象的后代）。像这样：

document.onclick = function(e) {
    if ( e.target.nodeName != 'OBJECT' ) {
        // the click happened on a non-object (probably "outside")
    }
};

演示：http://jsbin.com/elikum/1

请记住，javascript事件很难在旧版浏览器中进行规范化，因此根据目标受众，您可能会考虑像jQuery这样的库来简化事件处理。

Answer 2

所以你得到了一个你正在寻找的答案，很棒。

顺便说一下;

document.getElementsByClassName返回“NodeList”或“HTMLCollection”（参考：https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName）。

因此，您需要使用for-next方法将事件附加到节点。

// i.e
var els = document.getElementsByClassName('objects'), 
    el, i;
for (i = 0; i < els.length; i++) {
    el = els[i];
    el.onclick = function() {
    // ...
}

// or
while (el = els[i++]) {
    el.onclick = // ...

Answer 3

使用您的示例，您只需要通过检查事件的目标属性来添加检查以查看实际单击的元素。你真的不需要'objects'类，你可以修改它来检查tagName，就像其他人在他们的答案中所做的那样。我添加的classname检查肯定是不理想的，因为它会传递，即使你有一个类更长的类名，碰巧包含单词'objects'。您可以使用像jQuery这样的库来让您的生活更轻松。

试试这个，将这个html放在一个文件中并在浏览器中加载。

<html>
    <head>
        <script>
            function outClick(event) {
                    if(event.target.className.indexOf('objects') > -1) {
                    alert("is object");
                } else {
                    alert("not object");
                }
            }
        </script>
        <style>
            html,body,#FPAGE { height:100% }
        </style>
    </head>
    <body>
        <div id="FPAGE" onclick="outClick(event)">
            <center>
                <object class="objects" width="500px" height="500px">OBJECT</object>
                <br />
                <object class="objects" width="500px" height="500px">OBJECT2</object>
            </center>
        </div>
    </body>
</html>

Answer 4

为您不想处理点击的对象添加事件处理程序，执行event.stopPropgation（或者，如果您已经拥有对象的事件处理程序，只需向它们添加event.stopPropagation），然后为整个页面添加事件处理程序。

var objects=document.GetObjectsByClassName('objects');
for (var i=0, len=objects.length; i<len; i++) {
    objects[i].addEventListener("click",function(event){event.stopPropagation();});
}
document.addEventListener("click",...)

随着应用程序的发展，这种方法会更加健壮，并且您添加了其他不处理点击的项目 - 与在文档事件处理程序中构建怪物IF语句相比，您可以指定行为（在单个元素级别禁止点击。

在对象外部执行操作

4 个答案: