javascript - 取消绑定(bind)右键单击jquery

Question

我已尝试使用以下解除绑定(bind)方法来解除元素与类 '.rightclickarea' 的绑定(bind)。

   $('.rightclickarea').unbind();

         $('.rightclickarea').bind("contextmenu",function(e){
             e.preventDefault()
             });

但该元素并未解除事件的绑定(bind)。因此，每次我调用此方法 BindBookMarkPopUp() 时，它都会尝试再次绑定(bind)，这会产生问题。那么有什么办法可以在 jquery 中的每个绑定(bind)之前取消绑定(bind)。谢谢!

function BindBookMarkPopUp() {


$('.rightclickarea').unbind("contextmenu");

$('.rightclickarea').bind('contextmenu', function(e) {

    id = $(this).attr("id");

    $("#current_id").html(id.substring(3));
    $("#current_id").attr("data-type",1);

    var $cmenu = $(".vmenu_bookmark");
    $('<div class="overlay"></div>').css({
        left : '0px',
        top : '0px',
        position : 'absolute',
        width : '100%',
        height : '100%',
        zIndex : '100'
    }).click(function() {
        $(this).remove();
        $cmenu.hide();
    }).bind('contextmenu', function() {
        return false;
    }).appendTo(document.body);
    $(".vmenu_bookmark").css({
        left : e.pageX,
        top : e.pageY,
        zIndex : '101'
    }).show();
    return false;
});

$('.vmenu_bookmark .first_li').live('click', function() {
    if ($(this).children().size() == 1) {
        alert("book_marks");

        if ($(this).attr("id") == "vmenu_bookmark") {
            $.colorbox({
                inline : true,
                width : 280,
                height : 120,
                href : "#title_content",
                title : "Enter title for Bookmark"
            });

        }
        $('.vmenu_bookmark').hide();
        $('.overlay').hide();
    }
});


$('.vmenu_bookmark .second_li').live('click', function() {


    if ($(this).children().size() == 1) {

        if ($(this).attr("id") == "vmenu_project") {

        alert("project_click")
            PopulateProjects();

            $.colorbox({
                inline : true,
                width : 500,
                height : 400,
                title : "",
                href : "#title_content_project"

            });


        }

        $('.vmenu_bookmark').hide();
        $('.overlay').hide();
    }
});

HTML代码:

<div class="vmenu vmenu_bookmark">
            <div class="first_li" id="vmenu_bookmark"><span>Add to Bookmark</span></div>
            <div class="second_li" id="vmenu_project"><span>Add to Project</span></div>
            <div style="display: none;" class="sep_li"></div>

            <div style="display:none;" class="first_li"><span>XYZ</span>
                <div class="inner_li">
                    <span>ABC</span> 
                    <span>PQR</span>
                    <span>MNO</span>
                </div>
            </div>
    </div>

Answer 1

unbind 方法撤销(删除)先前绑定(bind)的事件处理程序。您不能提前取消绑定(bind)尚未绑定(bind)的处理程序。

如果您希望取消绑定(bind)某个事件处理程序，您可以随后执行此操作。例如，为了取消绑定(bind)所有以前绑定(bind)的 contextmenu 事件，你可以这样做:

$(".rightclickarea").unbind("contextmenu")

您还可以取消绑定(bind)所有以前绑定(bind)的所有类型事件，只需不提供参数即可:

$(".rightclickarea").unbind()

最后，如果您只想取消绑定(bind)特定的事件处理程序，您有两个选择(这两个选项都要求您在首次绑定(bind)时采取不同的操作):

选项 1

您使用命名空间绑定(bind)您的方法，例如:

$(".rightclickarea").bind("contextmenu.myUniqueHandler", function() {
   /* your code here */
})

然后您可以使用以下方法取消绑定(bind)此特定事件处理程序:

$(".rightclickarea").unbind("contextmenu.myUniqueHandler")

选项 2

您将回调函数括起来并将其存储在一个变量中，然后将其传递给 bind 方法:

var myUniqueHandler = function() {
   /* your code here */
}

$(".rightclickarea").bind("contextmenu", myUniqueHandler)

然后使用上述变量解除绑定(bind):

$(".rightclickarea").unbind("contextmenu", myUniqueHandler)

---

编辑:

深入研究您的问题(在进一步澄清之后)您实际上遇到了 .vmenu_bookmark 在多次调用 BindBookMarkPopUp 之后同时触发多次的问题。

问题是您假设在 .rightclickarea 上使用 unbind 将反转在回调函数内完成(或绑定(bind))的任何操作。它不是。

当您使用 unbind 时，您只是阻止您的绑定(bind)函数进一步执行:

// this will not execute after an unbind:
$('.rightclickarea').bind('contextmenu', function(e) {

    // ....
    // some code
    // ...
    // ..

    // VVV This will not unbind, it will still work. VVV
    $('.vmenu_bookmark .first_li').live('click', function() { 
       /// ...
    })
})

您在上面所做的一切，在解除绑定(bind)后都不会撤销 - 包括您的 .live/.bind 调用。

这意味着每次调用 BindBookMarkPopUp 都会将另一个事件处理程序 (bind) 添加到 .vmenu_bookmark，导致它们堆积起来。

解决方案是移动所有的 .bind() 和 .live() 调用(包括 .vmenu_bookmark...和 .rightclickarea) 到*函数之外*。

没有理由让你绑定(bind)多次——你只需要绑定(bind)一次。

---