2

画面のどこかをクリックすると、オブジェクトをクリックすると、少しコードが実行される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
}

解決策: (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

ページ全体にクリックイベントを追加してから、そのクリックのターゲットがオブジェクト（またはそのオブジェクトの子孫）であるかどうかを確認できます。このようなもの：

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 に答える
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

例を参考にして、イベントのターゲットプロパティをチェックすることにより、実際にクリックされた要素を確認するためのチェックを追加する必要があります。'objects'クラスは実際には必要ありません。代わりに、他の2人の人々が回答で行ったように、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

クリックを処理したくないオブジェクトのイベントハンドラーを追加して、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 に答える