javascript - 我怎样才能让这个 JavaScript 下拉菜单处理特定的文本

标签 javascript jquery

基本上,这个脚本的作用是,当用户右键单击网页上的任意位置时,它会显示一个自定义下拉菜单,但我对此感兴趣,以便它只显示特定对象或 div 上的自定义右键单击菜单。不是这样出现在屏幕上的任何地方。感谢您的任何建议或演示。

脚本

<script>
$(document).bind("contextmenu", function (event) {
event.preventDefault();
$(".custom-menu").finish().toggle(100).
css({
    top: event.pageY + "px",
    left: event.pageX + "px"
});
});
$(document).bind("mousedown", function (e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$(".custom-menu").hide(100);
}
});
$(".custom-menu li").click(function(){

    // This is the triggered action name
    switch($(this).attr("data-action")) {

    // A case for each action. Your actions here
    case "first": alert("first"); break;
    case "second": alert("second"); break;
    case "third": alert("third"); break;
    }


    $(".custom-menu").hide(100);
   });
  </script>

正文

<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
Right click me

最佳答案

在上下文中使用 on

$(document).on("contextmenu", ".rc", function (event) {
event.preventDefault();
$(".custom-menu").finish().toggle(100).
css({
    top: event.pageY + "px",
    left: event.pageX + "px"
});
});
$(document).bind("mousedown", function (e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$(".custom-menu").hide(100);
}
});
$(".custom-menu li").click(function(){

    // This is the triggered action name
    switch($(this).attr("data-action")) {

    // A case for each action. Your actions here
    case "first": alert("first"); break;
    case "second": alert("second"); break;
    case "third": alert("third"); break;
    }


    $(".custom-menu").hide(100);
   });
.custom-menu{
   display:none;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<span class="rc">Here</span>
<span>Nope</span>

关于javascript - 我怎样才能让这个 JavaScript 下拉菜单处理特定的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35323510/

相关文章:

javascript - JQuery 委托(delegate) IE8

javascript - 如何使用 JavaScript 将音频从 MediaStreamAudioSourceNode 保存到 AudioBuffer?

jquery - 使用 Jquery 加载填充 jquery ui 对话框时的 knockout 绑定(bind)

javascript - HTML 可选择表格,具有编辑/删除/查看选项

javascript - 使用ajax和rails将多个参数保存在单个数组中

c# - 如何使用 C# 在 ASP.NET 中显示带有图标的消息框

javascript - 如何更快地对 HTML 表格进行排序?

javascript - Web 入门套件 - 添加字体

jquery - 自动完成在 Bootstrap Modal 上不起作用

javascript - AngularJS 计数器计数到目标数