1

jqueryを使用して、リスト要素をクリックすると何かが起こるが、そのリスト内の要素(スパンなど)をクリックすると何も変更する必要はないと言うことは可能ですか?

例

<li><span>hello</span></li>li 要素 => alert("list") をクリックすると、li => alert("hello") 内の span 要素をクリックすると、alert("list") も表示する必要はありません.

4

3 に答える 3

1

はい、event.targetイベントをトリガーしたノードを確認してください。

$('li').click(function(event){
    if (event.target. == event.currentTarget)
        // li element triggered
    else
        // inner elements triggered
});

ライブ STUPID デモ

于 2012-06-28T23:10:29.617 に答える
1

使用する必要がありますevent.stopPropagation;

http://api.jquery.com/event.stopPropagation/

jsFiddle デモ

メソッドを使用する場合.live()(そして jQuery 1.7+ を使用している場合) は、次の.onようなメソッドを使用することをお勧めします。

$('ul').on('click','li',function(){
  alert('UAAAAAAA! FOOO BARRRRR');
});

$("li").on('click','span',function(event){
  event.stopPropagation();
  $(this).text('See? No alert dropped! ;)');
});

詳細: http://api.jquery.com/on

.on() メソッドは、jQuery オブジェクトで現在選択されている要素のセットにイベント ハンドラーをアタッチします。jQuery 1.7 以降、.on() メソッドは、イベント ハンドラーをアタッチするために必要なすべての機能を提供します。古い jQuery イベント メソッドからの変換については、.bind()、.delegate()、および .live() を参照してください。.on() でバインドされたイベントを削除するには、.off() を参照してください。1 回だけ実行されてから削除されるイベントをアタッチするには、.one() を参照してください。

于 2012-06-28T23:10:38.880 に答える
0

ライブデモを参照

  1. Red境界線と内側をクリックします-そのLIST
  2. Bluw境界線と内側をクリックします-そのHELLO

HTML:

<ul>
    <li>
        <span>hello</span>
    </li> 
</ul>​

JS:

$('*').click(function() {
    if (this.tagName == "LI")
        alert("List");
    else if (this.tagName == "SPAN")
        alert("hello");
    return false;
});​
于 2012-06-28T23:40:39.443 に答える