0

<p>そのような要素が多すぎてそれぞれにonclickイベントハンドラーをアタッチできないため、ウィンドウまたはドキュメントレベルで要素のイベントをリッスンしたいと思います。

これは私が持っているものです：

window.onload=function()
{
    window.addEventListener('click',onClick,false);
}
function onClick(event)
{
    alert(event.target.nodeName.toString());
}

上記のコードについてアドバイスが必要ですが、いいですか？また、クリックした要素が<p>チェック以外の要素であるかどうかを確認するにはどうすればよいnodeNameですか？たとえば、<p>要素に要素が含まれていて<b>、それがクリックされた場合、nodeTypeはではありbませんp。

ありがとうございました。

4

3 に答える 3

1

このことを考慮：

(function () {

    // returns true if the given node or any of its ancestor nodes
    // is of the given type
    function isAncestor( node, type ) {
        while ( node ) {
            if ( node.nodeName.toLowerCase() === type ) {
               return true;
            } 
            node = node.parentNode;
        }
        return false;
    }

    // page initialization; runs on page load
    function init() {

        // global click handler
        window.addEventListener( 'click', function (e) {
            if ( isAncestor( e.target, 'p' ) ) {
                 // a P element was clicked; do your thing   
            }
        }, false );

    }

    window.onload = init;

})();

ライブデモ： http： //jsfiddle.net/xWybT/

于 2011-09-10T22:58:56.807 に答える
1

いいと思います、こうやってチェックできます

var e = event.target
while (e.tagName != 'P')
   if (!(e = e.parentNode))
       return
alert(e)
于 2011-09-10T22:39:34.823 に答える
1

もし私があなたなら、あなたが「クリック」するのと同じ方法で「ロード」イベントに登録します。これはイベント処理のより新しい方法ですが、一部の古いブラウザではサポートされていない可能性があります。

nodeNameを確認することは、ノードに問い合わせる最良の方法です。

function onClick(event) {
    var el = event.target;
    while (el && "P" != el.nodeName) {
        el = el.parentNode;
    }
    if (el) {
        console.log("found a P!");
    }
}
于 2011-09-10T22:42:19.737 に答える