Javascript:捕获右键单击元素的 ID

Question

我有一段代码运行得很好，但它只处理一个 Id (headline11)。问题是我可以有很多 Id(headline11、headline12、headline13，...)。我可以获得右键单击元素的 ID，请参阅我的 fiddle https://jsfiddle.net/yagami889/xpvt214o/471009/但我无法让它适用于我的代码，我收到了一堆 jQuery 错误。这就是我在测试开始时尝试做的事情:

var idHeadline = "";

$('input').contextmenu(function() { 
            idHeadline = $(this).attr('id');
        });

$("#" + idHeadline).on("contextmenu",function(e){
  e.preventDefault();
  $("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
  $("#cntnr").fadeIn(200, startFocusOut);

});

function startFocusOut(){
  $("#cntnr").on("click",function(){
  $("#cntnr").hide();        
  $("#cntnr").off("click");
  });
}

$("#items > li").click(function(){
$("#" + idHeadline).val($(this).text().replace("fallback", " "));
var input1 = $("#" + idHeadline);
setInputSelection(input1, 9, 10);
});

这是工作代码:

$("#headline11").on("contextmenu",function(e){
  e.preventDefault();
  $("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
  $("#cntnr").fadeIn(200, startFocusOut);

});

function startFocusOut(){
  $("#cntnr").on("click",function(){
  $("#cntnr").hide();        
  $("#cntnr").off("click");
  });
}

$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = $("#headline11");
setInputSelection(input1, 9, 10);
});

感谢您的帮助，

Answer 1

改用事件委托(delegate)，这样您就可以监听整个文档上的右键单击，检查单击的元素是否是输入，如果是，运行适当的函数，不需要 ID:

$(document).on("contextmenu", 'input[id^="headline"]', function(e){
  e.preventDefault();
  console.log('running some function');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="headline11" type="text" />
<input id="headline12" type="text" />
<input id="notaheadline" type="text" />

对于您的 items 监听器，您可以执行相同的操作 - 仅添加一个监听器而不是多个监听器:

$("#items").on("click", 'li', function(){
  $(this).val($(this).text().replace("fallback", " "));
  // etc
});