如何将右键单击事件附加到可拖动的div

时间:2012-12-05 21:45:37

标签: jquery click mouse

这是我遇到的问题。我需要将某种句柄附加到可拖动的div上。

我需要做的是每次右键单击父级中的div时捕获鼠标右键。

这是我的孩子创作代码。这段代码工作正常,我可以创建多个div而没有问题。

var smallBlock = $('<div class="SmallBlock"></div>').appendTo("#canvas");
smallBlock..draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 150}})
smallBlock.append('<div class="article_title fontCenter fontBold font32">Article Title</div>')
smallBlock.append('<div class="article_Image"><img style="width: 250px;" src="<? echo $image1 ?>"></div>')
smallBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 

这是鼠标点击代码。

<script type="text/javascript">

function getRightClick()
{
    // check for right mouse pressed

$('#canvas').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left mouse button pressed');
            break;
        case 2:
            alert('Middle mouse button pressed');
            break;
        case 3:
            alert('Right mouse button pressed');
           break;
        default:
            alert('You have a strange mouse');
    }
});
}

</script>

我不知道如何让div识别出鼠标右键点击它。

顺便说一下,我需要检测父母中还有其他类别的div;所以更通用的解决方案可能会更好。

3 个答案:

答案 0 :(得分:1)

试试这个:

$("#canvas").bind("contextmenu", function(e) {
  alert('Right mouse clicked'); 
});

答案 1 :(得分:0)

您可以将其添加到上下文ID元素:

oncontextmenu="alert('right click on element');return false;

或者也许这样:

jQuery('#yourDIVId').mousedown(function(event) {
   var rightclk = false;
   if (event.which) rightclick = (event.which == 3);
     if(rightclk == true){
        alert('yes')
    }
});

答案 2 :(得分:0)

这样的事情可能有所帮助:

<head>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
    $('#page').ready(function() {
        $('#page').bind('contextmenu', function(event) {
            alert($(event.target).attr('id'));
            /*you can replace the alert with any function that you want to bind with right click
             */
        });
    });
</script>

<body>
    <div id='page'>
        <div id="divParent">click parent
            <div id="divChild">click child</div>
        </div>
    </div>
</body>
</body>

enter link description here