jquery - jquery:クリック可能な div でリンクをクリックできるようにします

Answer 1

提供した例は、div の id が「機能」であることを除いて機能するはずですが、js ではクラスをターゲットにしています。jsfiddle.net/SNP3K。

<div id="feature" rel="urlnumberone">
    some text
    <a href="#" class="insideLink">Link</a>
</div>

.

$('div#feature').click(function() { 
    alert('div');
});

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
    alert('link')
});

Answer 2

$(document).ready(function() {
    $('div#feature').click(function() {
        alert('div');
    });
    $('div#feature a').click(function(evt) {
        evt.stopPropagation();
    });
});

function topicchange(targ) {
    alert('link');
    return false;
}

これは許可されていますか？トピック変更関数はhrefから直接呼び出されますが、クリックイベントは伝播されません。それとも、すべてがトピック変更で行われますか？

Answer 3

http://api.jquery.com/bind/によると、event.stopPropagation は、ターゲット上の他のイベント ハンドラーの実行を許可する必要があります。Href から実行することもできますが、div へのデフォルトのクリック バブリングを無視して処理することもできます。

完全なデモ: http://jsfiddle.net/leomwa/qrFQM/

スニペット:

function topicChange()
{
    alert('Message from Link: After the div mouse event, I can execute');
    return false;
}

$('div#feature').click(function(evnt)
{
    var $originatingTarget = $(evnt.target);
    if ($originatingTarget && $originatingTarget.is('.insideLink'))
    {
        alert('Message from Div: Ahh! You clicked on Link...');
        evnt.stopPropagation(); // Allows other handlers on the event.target to be executed.
    }
});

@shanethehatに非常に似ています。

説明を求めてくれた @shanethehat に感謝します。