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 />タグは親からオーバーフローして<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

これは、JavaScript でのイベント キャプチャとバブリングが原因です。提供されたリンクで詳細を確認できます。

event.stopPropagationを使用してこれを防ぐことができます。

于 2013-06-04T09:35:31.483 に答える