次のリストがあります。
<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>
おり、クリック イベントをトリガーしています。
子ではなくリスト項目のクリック イベントのみを制限するにはどうすればよいですか? たとえメインのリーの幅と高さを超えていたとしても。