テキストコンテンツ領域をクリックしてHTML要素にテキストがあることを検出するにはどうすればよいですか？

Question

私はtext contentとboxed要素をdivに持っていますが、boxed要素をクリックすると変更が発生しますが、text contentをクリックしたときにのみ変更する必要があります。ここで

コードは次のとおりです。https://jsfiddle.net/Issact/u0g8LLLo/

<div> 
some text 
<span class="box"></span> 
</div> 

<div> 
some text 
</div> 

<div><span class="box"></span></div> 

JS：

$(document).on('click','div', function(){ 
    if (!$(this).text().trim().length > 0) { 
     $(this).text("foo"); 
    } else { 
    $(this).append('<span>You clicked on a text</span>'); 
    } 

}); 

Answer 1

あなたがノードにイベントハンドラをバインド、またはイベントの委任を使用し、thisはイベントが結合されたノードを指し、 （またはonの場合は委任されています）。

第一div要素内.boxをクリックして、thisとしてdivを取得します。 div要素にテキストが含まれているため、間違った結果になります。

代わりにevent targetを取得する必要があります。ターゲットはクリックされた実際の要素です。

$(document).on('click', 'div', function(e) { 
 

 
    var $target = $(e.target); // the event target 
 
    
 
    if (!$target.text().trim().length > 0) { 
 
    $target.text("foo"); 
 
    } else { 
 
    $target.append('<span>You clicked on a text</span>'); 
 
    } 
 

 
});

.box { 
 
    background-color: green; 
 
    height: 50px; 
 
    width: 50px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    some text 
 
    <span class="box"></span> 
 
</div> 
 

 
<div> 
 
    some text 
 
</div> 
 

 
<div><span class="box"></span></div>

Answer 2

その要素の別の要素と火災クリックイベントにテキストをラップしても.stopPropagation（）メソッドを使用して...

$("#demo").click(function(event){ 
    event.stopPropagation(); 
    alert("your text element was clicked"); 
    }); 

Answer 3

これが原因でイベントが起こっています泡立つので、私たちはそれを止める必要があります。それを停止するメソッドを持つJquery event.stopPropagation();。ここではdiv *セレクタを使用して、div内のすべての子要素のイベントを発生させないようにしました。代わりにdivのあなたは他のdiv

から区別するために任意のクラスを使用することができます

$(document).on('click','div', function(){ 
 

 

 
    $(this).append('<span>You clicked on a text</span>'); 
 

 
    
 
}).on("click","div *", function(e){e.stopPropagation();});

.box { 
 
    background-color:green; 
 
    height:50px; 
 
    width:50px; 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
some text 
 
<span class="box"></span> 
 
</div>

Answer 4

限り、あなたはあなたがIDやクラス

$(document).on('click','div', function(e){ 
if (e.target.id.toString() == "box" || $(e.target).hasClass("box")) { 
    $(this).append('<span>foo</span>'); 
} else { 
    $(this).append('<span>You clicked on a text</span>'); 
} 

https://jsfiddle.net/q6vbohxm/を比較してみてくださいidをとクラスを持っているように

Answer 5

これはあなたがするべき方法です。これはbody要素とbody内のテキストを持つ要素を選択するので、if文に入りますが、elese文も必要ならifの後に追加します。

$(document).on('click','body', function(e){ 
    var clickedTag, text; 
    clickedtag = e.target; 
    text = $(clickedtag).text().trim(); 
    if(text.length > 0){ 
    console.log(text); 
    } 
});