在使用jquery進行事件監聽時,有可能會出現事件冒泡的問題
解決的辦法是,使用jquery的bind方法
如:現在有一個div對象需要監聽他的鼠標事件:
<div class="dpx2"><div class="dpx2_px" style="cursor:pointer;" id="searchSort">請選擇排序方式↓</div>
<div class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
<div><a class="sortA">按時間升序↑</a></div>
<div><a class="sortA">按時間降序↓</a></div>
<div><a class="sortA">按評論數量升序↑</a></div>
<div><a class="sortA">按評論數量降序↓</a></div>
<div><a class="sortA">按點擊數升序↑</a></div>
<div><a class="sortA">按點擊數降序↓</a></div>
</div>
</div>
當鼠標移動到ID爲searchSort的Div上時,顯示下面的div。當鼠標移出下面的div時,隱藏div
JS爲:
$(function(){ var sortList = $("#sortList"); $("#searchSort").mouseover(function() { var offset = $(this).offset(); sortList.css("left", offset.left); sortList.css("top", offset.top+20); sortList.show(); }); //關鍵的一句,綁定Div對象的mouseleave事件 sortList.bind("mouseleave", function() { $(this).hide(); }); });