2

マウスクリック用のjqueryハンドラーを持つリストがあります。リスト内に画像を配置する必要がありますが、別の機能を実行するには画像をマウスでクリックする必要があります。マウスオーバーで何らかのバインドを解除し、マウスアウトでバインドすることを考えていましたが、機能しません。もっと簡単な方法はありますか？

私が抱えている問題は、画像をクリックすると 2 つのクリック可能なイベントが実行されることです。

JS

$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
    alert("This is a click on the list")
}
});
});

html 

<li id="tab" runat="server">Keywords <a class="fake-link" onclick="alert("This is an image click")"><img id="icon" src="images/icon.gif" style="float: right; visibility:visible"/></a></li>

では、画像クリックからのみアラートを受け取る方法はありますか? 前もって感謝します！

4

2 に答える 2

4 
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).attr('id')==='icon')){
//call that function which runs on image click
}
else {
    alert("This is a click on the list")
}
}
});
});

編集：puppybeardが提案したように、liのすべての画像に対して別の機能を実行したい場合は、別の方法があります

$(function () {
    var items = $('#v-nav>ul>li').each(function (index) {
    $(this).click(function (e) {
    if($(e.target).is('img'))){
    //call that function which runs on image click
    }
    else {
        alert("This is a click on the list")
    }
    }
    });
    });
于 2012-12-03T16:27:58.140 に答える
0

イベントバブリングでやりにくい。イベント名前空間と .on() .off() が役立ちます。

例えば：

var items = $('#v-nav>ul>li');

var someFunctionToPerform = function() {
alert('Imma list click event');
}

items.on('click.someEventNameSpace', someFunctionToPerform);

items.find('img').on({
    'mouseover': function() {
        items.off('click.someEventNameSpace');    
    },
    'mouseleave': function() {
        items.on('click.someEventNameSpace', someFunctionToPerform);
    },
    'click': function() {
        alert('Imma list image click event!');
    }   
});

このコードは、リスト内の画像のマウスオーバー イベントの後にリスト アイテムのクリック イベントのバインドを解除し、画像のマウスリーブ イベントの後にバインドし直します。

それはおそらく難しい方法ですが、それでもうまくいくはずです。イベントバブリングの方向が異なるため、IE 8では他の答えがバグである可能性があります。

于 2012-12-03T16:35:07.737 に答える