無法點擊jQuery菜單項

我已經創建了一個jQuery菜單，點擊一個小圖標時將會打開。這個菜單包含一些可點擊的鏈接和一個鏈接，它們將執行一些js操作並在同一菜單中創建一個新的文本框。但是當我點擊鏈接時，菜單會自動關閉。因此，即使顯示了文本框，只要再次單擊該圖標以查看菜單，也無法看到它。無法點擊jQuery菜單項

這裏是一個演示：http://jsfiddle.net/W2exq/1/

我已經使用了一些jQuery碼顯示和隱藏菜單，還可以顯示一個文本框。那麼如何才能保持打開的菜單，除非我們在菜單外單擊關閉它？如果您需要其他東西，請讓我知道。

HTML：

<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js></script> 
     <link rel="stylesheet" type="text/css" href="http://tharunjose.com/stack/style.css" /> 
</head> 
<div class="notes"> 
    <div class="noteTooltip"> 
     This link is for the special purpose of the main site.<hr /> 
     <a class="noteEdit" id="add_btn" href="#">Edit note</a> 
     <a class="noteTrash" href="#"></a> 
    </div> 
</div>

CSS：

.notes{ 
    position:relative; 
    width:16px; 
    height:16px; 
    margin:0 auto; 
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -228px -34px transparent; 
} 
.notes:hover{ 
    cursor:pointer; 
    background-position:-207px -34px; 
} 
.noteTooltip{ 
    display:none; 
    position:absolute; 
    top:25px; 
    left:-10px; 
    width:130px; 
    text-align:left; 
    line-height:18px; 
    border:2px solid #363636; 
    z-index:9999; 
    background:#fbfbfb; 
    -webkit-border-radius:3px; 
    -moz-border-radius:3px; 
    border-radius:3px; 
    padding:10px 10px 6px 10px; 
    cursor:auto; 
} 
.noteTooltip:before{ 
    content:''; 
    position:absolute; 
    top:-10px; 
    left:10px; 
    width:0; 
    height:0; 
    border-left:5px solid transparent; 
    border-right:5px solid transparent; 
    border-bottom:8px solid #000; 
    z-index:9999; 
} 
.noteEdit{ 
    color:#3ba5d5; 
    text-decoration:none; 
    float:left; 
} 
.noteTrash{ 
    display:block; 
    float:right; 
    padding:6px; 
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -20px -106px transparent; 
}

JS：

$(document).ready(function() { 
    $(document).click(function(e) { 
     $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open"); 
    }); 
    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) { 
     e.stopPropagation(); // this prevents it closing via document.click 
     $(this).toggleClass("open"); 
    }); 


     var handler_func = function() { 
     var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0; 
     var e = document.createElement('input'); 
     e.type='text'; 
     e.width=40; 
     e.name = 'added'+i; 
     this.rel = i+1; 
     this.parentNode.appendChild(e); 
     return false;  
     } 

     var add_btn = document.getElementById('add_btn'); 
     if(add_btn.attachEvent) 
       add_btn.attachEvent('onClick', handler_func); 
     else if(add_btn.addEventListener) //Firefox & company 
       add_btn.addEventListener('click', handler_func, false); 
});

來源

2012-09-18 99tharun

您需要冒泡的DOM，並使其關閉「彈出」菜單停止「click」事件。

這是不完善的（允許你創建多個文本元素，我不會做所有的工作：P），但應該給你一個很好的起點：

$(document).ready(function() { 
    $(document).click(function(e) { 
     $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open"); 
    }); 

    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) { 
     e.stopPropagation(); // this prevents it closing via document.click 
     $(this).toggleClass("open"); 
    }); 

    $(".noteTooltip").click(function(e) { 
     e.stopPropagation(); //stop the onclick call bubbling up the DOM. 
     e.preventDefault(); //stop the onclick call bubbling up the DOM. 
    }); 

    $("#add_btn").click(function(event) { 
     var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0, 
      element = document.createElement('input'); 

     event.stopPropagation(); //stop the onclick call bubbling up the DOM. 
     element.type='text'; 
     element.width=40; 
     element.name = 'added'+i; 
     this.rel = i+1; 
     this.parentNode.appendChild(element); 
     return false; 
    }); 

});

event.stopPropagation()從阻止事件冒泡DOM樹，阻止任何父處理程序被通知事件。

A blog post也對事件冒泡。

jsFiddle example。

來源

2012-09-18 12:35:50 Sphvn

謝謝，這個答案和上面的答案有什麼不同？ – 99tharun

沒有那麼多，我在寫我的時候沒有看到上面的答案。我還更新了您的add_btn click事件以使用jQuery處理程序也使您的代碼更加一致。 – Sphvn

你需要在.noteTooltip添加點擊監聽器：

$(".noteTooltip").click(function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
});

來源

2012-09-18 12:31:29

我已經使用了相同的技術裏面的菜單定製的複選框。但是當我使用此代碼複選框下拉菜單不單擊複選框時不退出時，複選框不起作用。 – 99tharun

然後，您應該添加一個容器來包裝您的複選框，並將點擊偵聽器添加到該容器。 –

@ 99tharun請在我的答案中提供event.stopPropagation（）鏈接。這裏有足夠多的代碼示例來解決您的問題（在提供的兩個答案中），您需要了解點擊事件如何使DOM元素產生泡沫，以瞭解這如何影響您當前的實現。 – Sphvn

你需要的是點擊Edit Note何時停止事件傳播史，也當你點擊時，被添加文本框。

只是傳遞活動在handler_func

var handler_func = function (evt)

，並在相同功能的return false;前加

e.onclick = function(e1) { 
       e1.stopPropagation(); 
      } 
evt.stopPropagation();

這將解決這個問題。

Demo

來源

2012-09-18 12:50:40

無法點擊jQuery菜單項

回答

相關問題