无法点击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菜单项

回答

相关问题