2

我有以下列表：

  <ul id="menu">
            <li style="background-image:url('Images/X-AFH-Company-Office-Background.png')" id="office">
                <!-- <div style="width:250px;height:300px;position:absolute;" ></div>-->
                <div >Company / Office</div>
                <img src="Images/Employee.png"  onmouseover="this.src='Images/Employee-Stroke.png'" onmouseout="this.src='Images/Employee.png'" />
                <img class="stroke" style="display:none"  src="Images/Employee-Stroke.png" />
            </li>
            <li  style="background-image:url('Images/X-AFH-Hospital-Clinic-Background.png')" id="clinic" >
                <div >Hospital / Clinic</div>
                <img src="Images/Doctor.png"  onmouseover="this.src='Images/Doctor-Stroke.png'" onmouseout="this.src='Images/Doctor.png'" />
               <div style="width:100px;height:350px;position:absolute;left:0;top:0;z-index:21"></div>
                                </li>
            <li style="background-image:url('Images/X-AFH-University-School-Background.png')" id="school">
                 <div >University / School</div>
                <img src="Images/Student.png"  onmouseover="this.src='Images/Student-Stroke.png'" onmouseout="this.src='Images/Student.png'" />

            </li>
etc...

<li>并在该列表的主要部分有一个点击事件。但是，<img />标签从它们的 parent 溢出<li>并正在触发 click 事件。

如何仅限制列表项的单击事件而不是其子项？即使它们超出了主要 li 的宽度和高度。

4

3 回答 3

2

您可以在子元素上使用stopPropagation()来阻止它触发。

这是一个限制所有作为列表元素子元素的图像触发警报的示例：

$("li").click(function(e) {
   alert("Clicking on the li will trigger this, not the img children");
});

$("li img").click(function(e) {
   e.stopPropagation(); // The img children inside li will not trigger the li event.
});

jsFiddle 示例。

于 2013-06-04T09:18:56.763 回答
1

作为现有答案的替代方案，您可以简单地比较event.target反对this（点击处理程序绑定到的元素）：

$('li').on('click', function(e) {
   if (e.target === this) {
     // code is only executed when li is clicked
   }
});

这是一个简单的演示小提琴

于 2013-06-04T09:30:24.540 回答
1

这是由于javascript 中的事件捕获和冒泡。您可以在提供的链接中找到更多详细信息。

您可以使用event.stopPropagation来防止这种情况。

于 2013-06-04T09:35:31.483 回答