3

インラインでクリック イベントが設定されている div html 要素があります (やりたい方法ではなく、レガシー コードです)。こちらをご覧ください

<div class="myDiv" onclick="triggerJavascript();" id="myDiv">

<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>

私がしたいのは、クリックイベントがtest5から発生したスパンタグを認識し、triggerJavascript関数でロジックを実行しないでください。それ以外の場合は、triggerJavascriptでロジックを完了します。

どうすればこれを設定できますか? 私はjqueryで作業しています。

4

4 に答える 4

3

event.target要素にアクセスするために使用できます。ただし、この要素に到達するには、onclick属性を少し変更する必要があります。

<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">

event次に、でアクセスできますtriggerJavascript：

function triggerJavascript(e){
   var element = e.target;
}

が必要な理由の詳細な説明については、この回答も参照してください。event

デモ; text5 チェック付きのデモ:

<script>function triggerJavascript(e){        
    if(e.target.id === "text5")
        alert("text 5 hit");
    e.stopPropagation();
}
</script>
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
    <span id="text1">Text 1</span> <!-- closing tags -->
    <span id="text2">Text 2</span>
    <span id="text3">Text 3</span>
    <span id="text4">Text 4</span>
    <span id="text5">Text 5</span>
</div>
于 2012-07-30T17:45:46.023 に答える
1

を使用できないonclick="triggerJavascript();"か、イベント ターゲット (クリックされたスパン) がイベント ハンドラーに渡されません。

あなたはjQueryを使用していると述べているので、これを使用してください：

$('#myDiv').click(function(evt) {
    alert("The target is: " + evt.target.id);
});
于 2012-07-30T17:46:24.777 に答える
0

HTML

<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
  <span id="text1">Text 1<span>
  <span id="text2">Text 2<span>
  <span id="text3">Text 3<span>
  <span id="text4">Text 4<span>
  <span id="text5">Text 5<span>
</div>

JavaScript

<script type="text/javascript">
   function triggerJavascript(event) {
      // event.target will catch the clicked element
      if (event.target.id !== 'text5') {
          // do something
      }
   }
</script>

デモ

于 2012-07-30T17:52:08.590 に答える
0

HTML を変更できない場合は、次のような方法を試すことができます。

var triggerJavascript = (function(){
    var clicked;
    $("#myDiv span").click(function(e){
        clicked = $(e.target).attr("id");
    });
    return function() {
        if (clicked == "text5") {
            return;
        }
        //do something cool...
    }
})();

推測ですが、jQuery クリック ハンドラーが実際のtriggerJavascriptロジックの前に実行されるという保証はないため、これが常に正しく機能するとは限りません。

于 2012-07-30T17:52:51.367 に答える