web-dev-qa-db-ja.com

要素内の要素をクリックしているかどうかを検出します

高さと幅が設定された要素（たとえば、IDが「Test」のdiv）があります。この要素内にランダムに配置されるのは、他の（小さい）要素（たとえば、idの "inner1"、 "inner2"、 "inner3"）ですが、空白、つまり要素がないスペースもあります。メイン要素をクリックすると起動する関数が欲しいのですが、空白をクリックしているかどうかを検出します。クリックしていない場合は、内部要素をクリックして、内部要素のIDを返します。

ああ、内部要素は動的に生成されるので、事前にIDがわからないので、それらがdivまたはspanのいずれかであることがわかります...（例としても同様ですが、複数のタイプの要素があります）。

みんな、ありがとう。

編集:(私が意味することを投稿するように私に思い出させてくれたXotic750に感謝しているので:)）

Javascriptを介して内部クリックを検出する方法がわからないため、あまり試していません。

しかし、ここに例があります：

<div id="test">
    <div id="inner1"></div>
    <span id="inner2"></span>
    <div id="inner3"></div>
</div>
<style>
div#test {
    width:300px;
    height:400px;
    position:relative;
    display:block;
    border:1px solid blue;
}
div#test div, div#test span {
    display:block;
    position:absolute;
    border:1px solid red;
}
div#inner1 {
    top:15px;
    left:15px;
    height:15px;
    width:15px;
}
span#inner2 {
    top:65px;
    left:65px;
    height:15px;
    width:15px;
}
div#inner3 {
    top:155px;
    left:155px;
    height:15px;
    width:15px;
}
</style>

http://jsfiddle.net/BgbRy/2/

javascriptonmousedown
7
Tobias Hagenbeek

これがあなたの言いたいことだと思いますか？

var test = document.getElementById('test');

function whatClicked(evt) {
  alert(evt.target.id);
}

test.addEventListener("click", whatClicked, false);
div#test {
  width: 300px;
  height: 200px;
  position: relative;
  display: block;
  border: 1px solid blue;
}

div#test div,
div#test span {
  display: block;
  position: absolute;
  border: 1px solid red;
}

div#inner1 {
  top: 15px;
  left: 15px;
  height: 15px;
  width: 15px;
}

span#inner2 {
  top: 65px;
  left: 65px;
  height: 15px;
  width: 15px;
}

div#inner3 {
  top: 155px;
  left: 155px;
  height: 15px;
  width: 15px;
}
<div id="test">
  <div id="inner1"></div>
  <span id="inner2"></span>
  <div id="inner3"></div>
</div>
24
Xotic750

onClickハンドラーをTestdivに追加し、イベントバブリングを使用して内部要素のクリックをトラップします。クリックした要素をイベントオブジェクトから抽出できます。

document.getElementById("Test").onclick = function(e) {
    e = e || event
var target = e.target || e.srcElement
// variable target has your clicked element
    innerId = target.id;
    //  do your stuff here. 
    alert("Clicked!");

}
2
user1864610