3

トリガーされたイベント (onmousedown、onmouseup、onclick など) の座標を指定するだけで、HTML コントロールの ID を取得する方法を教えてください。座標は

e.clientX 、 e.clientY e はイベント オブジェクトです。

アイデアは、そのコントロールの定義に onClick イベントを持たずに、クリック イベントが行われるコントロールの ID を取得することです。

これにより、複数のコントロールに対して onClick イベントを指定する必要がなくなります。

4

5 に答える 5

5

私はこれが可能だとは思いませんが、幸いなことに（私があなたの要件を正しく理解していれば）あなたは以下をする必要はありません：

各要素にクリックイベントハンドラーを指定せずに、ユーザーがクリックしたHTML要素を取得する場合は、最上位の要素（他のすべての興味深い要素を含む要素-おそらく「ドキュメント」）にクリックハンドラーを指定するだけです。次に、MouseEventのターゲットプロパティを確認します。これは、onclickイベントハンドラーを指定した要素ではなく、最初にクリックを受け取ったHTML要素を指定します（これは、「this」キーワードを使用するだけで取得できます）。

Firebugを使用している場合は、ここStackOverflowのFirebugコンソールでこれを試してください。 

document.getElementById('question').onclick = function(e) { 
  var target = window.event?window.event.srcElement:e.target; 
  alert("Got click: " + target); 
}

次に、質問テキストの任意の場所をクリックして、正しいHTML要素を含むアラートを取得します:-)。

于 2009-02-26T11:27:31.167 に答える
2

これは非常に良い質問です。探している関数が次のようなものであると仮定しましょう。

document.elementFromPoint = function(x,y) { return element; };

このあいまいな関数は、実際にはgeckoレイアウトエンジンを使用してFirefox3.0に実装されています。

https://developer.mozilla.org/en/DOM/document.elementFromPoint

ただし、他の場所では機能しません。ただし、この関数は自分で作成できます。

document.elementFromPoint = function(x,y) {

    // Scan through every single HTML element
    var allElements = document.getElementsByTagName("*");

    for( var i = 0, l = allElements.length; i < l; i++ ) {

        // If the element contains the coordinate then we found an element:
        if( getShape(allElements[i]).containsCoord(x,y) ) {
            return allElements[i];
        }

    }

    return document.body;

};

それは非常に遅いでしょう、しかし、それは潜在的にうまくいくかもしれません！HTMLコードを高速化するためにこのようなものを探していた場合は、代わりに別のものを見つけてください...

基本的には、ドキュメント内にあるすべてのHTML要素を調べて、座標を含む要素を見つけようとします。element.offsetTopとelement.offsetWidthを使用して、HTML要素の形状を取得できます。

いつかこんなものを使っていることに気付くかもしれません。これは、ドキュメント全体で何かを普遍的にしたい場合に便利です。どこでも機能するツールチップシステムや、左クリックでコンテキストメニューを起動するシステムのように。getShapeの結果をHTML要素にキャッシュする方法を見つけることが望ましいでしょう...

于 2009-08-23T00:08:27.357 に答える
1

これにより、複数のコントロールに対してonClickイベントを指定する必要がなくなります。

これが唯一の目標である場合は、jQueryを使用して複数の要素のイベントハンドラーをエレガントに指定することをお勧めします。

これは、まさにこれを行うjQueryチュートリアルの例の1つです。

 $(document).ready(function() {
    $("a[href*=/content/gallery]").click(function() {
       // do something with all links that point somewhere to /content/gallery
    });
 })
于 2009-02-26T11:23:53.030 に答える
0

HTMLページがレンダリングされると、さまざまな要素の位置がブラウザのレンダリングエンジンによって動的に導出されます。結果のレイアウトプロパティを確実にテストできる要素は画像だけです。

したがって、必要なことを行うには、すべての要素に絶対位置を使用し、コントロールを場所に結び付けるためにページマップを別の場所に保存する必要があります。これは複雑すぎると思います！

質問とは多少矛盾しますが、JavaScriptまたはサーバー側を介して、onclickイベントをコントロールにアタッチする必要があります。ごめん！

于 2009-02-26T11:32:35.943 に答える
0

実際にはその位置は必要ありません。必要なのは、イベントオブジェクトのターゲットプロパティです。これがjQueryでどのように処理されるかはわかりませんが、上記のリソースから着想を得た簡単な例を次に示します。

JavaScript

<script type="text/javascript">
window.onload = function() {
    document.body.onclick = function(event) {
        alert(event.target.id);
    }
}
</script>

CSS

div {
 width: 200px;
 height: 200px;
 margin: 30px;
 background: red;
}

HTML

<div id="first-div"></div>
<div id="second-div"></div>
于 2009-02-26T11:35:36.793 に答える