Question

我有以下列表：

  <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 />标记从其父<li>溢出并触发点击事件。

我如何才能限制列表项的点击事件而不是他们的孩子？即使它们超出了主要的宽度和高度。

Answer 1

您可以在子元素上使用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 example.

Answer 2

作为现有答案的替代方法，您只需将event.target与this（点击处理程序绑定的元素）进行比较即可：

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

Here's a simple demo fiddle

Answer 3

这是由于Event Capturing and bubbling in javascript。您可以在提供的链接中找到更多详细信息。

您可以使用event.stopPropagation来阻止此操作。

jQuery忽略子元素事件

3 个答案:

Here's a simple demo fiddle