0

div タグの contextmenu を作成して、コンテンツを追加したいと考えています。しかし、連続して何度も右クリックすると、div タグに必要以上のコンテンツが含まれています。これが私のコードです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
#MyMenu{

position: absolute;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
$('#add').click(function(e){
  var ContentToAppend='<p>My Content</p>';
  $('#container').append(ContentToAppend);  
});
}); 
});
</script>

</head>

<body>

<div id="container">

</div>
<ul id="MyMenu">
<li><a href="#" id="add">Add</a></li>
<li><a href="#" id="del">Delete</a></li>
</ul>
</body>

</html>

たとえば、連続して 5 回右クリックすると、私の div には 5 行の「マイ コンテンツ」が含まれますが、必要なのは 1 行だけです。

4

1 に答える 1

1

試してください（デモを参照）：

$(document).ready(function(){
  $('#container').bind('contextmenu',function(e){
    e.preventDefault();

    var x=e.pageX;
    var y=e.pageY;

    $('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
  }); 

  $('#add').click(function(e){
    var ContentToAppend='<p>My Content</p>';
    $('#container').append(ContentToAppend);  
  });
});​

お使いのバージョンでは、#addユーザーがコンテキスト メニューを開くたびに、要素のクリック イベント ハンドラにバインドします。したがって、5 回のクリック後、5 回のクリック イベント ハンドラが発生するため、要素をクリックすると、文字列が要素に 5 回#add追加されます。'<p>My Content</p>'#container

于 2012-07-29T14:21:39.733 に答える