2

我有一个列表，其中包含一个用于单击鼠标的 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>

那么有什么想法我只能从图像点击中获得警报吗？提前致谢！

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's中的所有图像

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

此代码将在列表内图像上的 mouseover 事件后取消绑定列表项的单击事件，并在图像上的 mouseleave 事件后将它们绑定回来。

这可能是困难的方式，但它仍然应该工作。由于事件冒泡的不同方向，其他答案在 IE 8 中可能有问题。

于 2012-12-03T16:35:07.737 回答