Question

我有一个列表，其中包含一个用于鼠标单击的jquery处理程序。我需要在列表中放置一个图像，但需要在图像上单击鼠标才能执行不同的功能。我正在考虑鼠标悬停上的某种解除绑定和鼠标输出绑定但无法使其工作。有更简单的方法吗？

我遇到的问题是当我点击图片时它会执行两个可点击的事件。

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>

所以任何想法我只能从图像点击中获得警报？提前谢谢！

Answer 1

$(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")
}
}
});
});

编辑：因为如果你想为li中的所有图像运行不同的功能，这里建议的dogbeard是另一种方式

$(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")
    }
    }
    });
    });

Answer 2

因为事件冒泡而很难做到。事件命名空间和.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!');
    }   
});

此代码将解除列表中图像上鼠标悬停事件后列表项的单击事件，并在图像上的mouseleave事件后将其绑定回来。

这可能是艰难的方式，但仍然应该有效。其他答案可能是IE 8中的错误 - 因为事件冒泡的不同方向不同。

禁用其他点击图片

2 个答案: