jquery - 使 CSS 定位仅更改一次 onclick

Question

代码 ：

    $(document).ready(function(){
    $("#main_div").bind('click', function(e){
    var x = event.pageX-document.getElementById("main_div").offsetLeft;
    var y = event.pageY-document.getElementById("main_div").offsetTop;


    if(...)
    {
    $("#container-5").css({"top":y,"left":x});
    $(this).unbind('click');
    e.stopPropagation();

    }
    else if(...)
    {

    ....

    });
 });

当我单击 main_div 时，它会检查 if 函数并继续。container-5 的 CSS 也发生了变化。现在，一旦更改了 css，我不希望它在 main_div 点击时继续更改。所以我尝试$(this).unbind('click');了但这并没有帮助，因为我希望 main_div 被点击多次，以便我可以执行其他功能。帮助真的很感激。

Answer 1

另一种方式，也许是更优雅的方式，将使用 jQuery 的.one()方法只触发一次 onclick 处理程序。您将按如下方式实现它：

$("#main_div").one('click', function(e) {
    //the rest of your code
});

请注意，这至少可以为您节省 4 行代码！

Answer 2

只需在回调函数中添加一条附加if语句，该语句第一次为真，之后永远为假：

var hasBeenClicked = false;
$("#main_div").bind('click', function(e){
    if(!hasBeenClicked){
        hasBeenClicked = true;
        ...
        //the rest of your code
        ...
    }
});