2

I'm attempting to create a javascript where when you click anywhere on the screen but on an object, it does a bit of code. (To close a dialogue box, remove nighttime mode, etc.)

//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>

I'm really unsure what I should be doing. I have thought of some sudo code, but I don't know if this can be done in javascript.

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

SOLUTION: (Thanks to David) 

<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>
4

4 回答 4

0

为不想处理点击的对象添加事件处理程序会更干净，执行 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 语句相比，您可以指定行为（抑制单击或不是）在单个元素级别。

于 2013-01-20T03:53:08.063 回答
0

根据您的示例，您只需添加一个检查，通过检查事件的目标属性来查看实际单击了哪个元素。您实际上并不需要“对象”类，而是可以修改它以检查 tagName ，就像其他几个人在他们的答案中所做的那样。我添加的类名检查绝对不理想，因为即使您有一个较长的类名恰好包含“对象”一词，它也会通过。你可以使用像 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>
于 2013-01-20T02:52:28.173 回答
0

所以你得到了你正在寻找的答案，太好了。

顺便一提;

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 = // ...
于 2013-01-20T02:32:03.677 回答
0

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

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 之类的库来简化事件处理。

于 2013-01-20T02:18:26.490 回答