jquery click 处理布尔值更改后的额外功能答案

【问题标题】：jquery click handles extra function after boolean changedjquery click 处理布尔值更改后的额外功能
【发布时间】：2014-09-07 06:13:37
【问题描述】：

In this fiddle 我有一个 div，它在单击另一个元素时移动，并在单击除 div 本身之外的所有元素时移回。我用布尔值检查它的位置。我遇到的问题是，在布尔值更改后，它无需再次单击即可执行另一个函数，因此 div 只是在每次单击时来回移动。

这是代码：

<p>Click me!</p>
<div></div>

div {
height: 50px;
width: 50px;
background-color: red;
}

$(document).ready(function () {
var isRight = false;
function toRight() {
    $('div').animate({'margin-left':'60%'}, 500);
    isRight = true;
}
function toLeft() {
    $('div').animate({'margin-left':'0'}, 500);
    isRight = false;
}
$('*:not(div)').on('click', function() {
    if (isRight) {
        toLeft();
    }
});
$('p').on('click', function () {
    if (!(isRight)) {
        toRight();
    }
});

});

【问题讨论】：

标签： javascript jquery function click boolean

【解决方案1】：

您已经很接近了，但您需要同时排除 div 和 p 以供下次点击。

试试这个：

$(document).ready(function () {
    var isRight = false;
    function toRight() {
        $('div').animate({'margin-left':'60%'}, 500);
        isRight = true;
    }
    function toLeft() {
        $('div').animate({'margin-left':'0'}, 500);
        isRight = false;
    }
    $('*:not(div,p)').on('click', function(e) {
        if (isRight && !($(e.target).is("div"))) {
            toLeft();
            e.stopPropagation();            
        }
    });
    $('p').on('click', function (e) {
        if (!(isRight)) {
            toRight();
            e.stopPropagation();            
        }
    });
});

UPDATED DEMO

【讨论】：

哦，抱歉，正在更新它...现在看看...@Solver 现在可以用了吗？
是的！完美的！非常感谢！

【解决方案2】：

向该 div 添加一个类并执行以下操作：

  $('*').on('click', function(e) {
    e.stopPropagation()

 if(!$(this).hasClass("block") && !($(this).hasClass("clickme")))
 {
    if (isRight) {
        toLeft();
    }
 }
});
$('p').on('click', function (e) {
    e.stopPropagation();
    if (!(isRight)) {
        toRight();
    }

});

如果您想将其移回右侧，则在相同的p 标签上单击，您可以使用else 部分处理它：

$('p').on('click', function (e) {
    e.stopPropagation();
    if (!(isRight)) {
        toRight();
    }
    else
    {
        toLeft();
    }
});

UPDATED FIDDLE

Second Version

【讨论】：

它确实解决了部分问题，但是当我再次单击 p 元素时，它移动了 2 次，当我单击 div 时它仍然向后移动。
它移动了两次，因为我添加了 else 部分
删除else部分还是会移动2次？并且当div被点击时它不能移动。

【解决方案3】：

尝试更改这些：

$('*:not(div)').on('click', function() {
    if (isRight) {
        toLeft();
    }
});
$('p').on('click', function () {
    if (!(isRight)) {
        toRight();
    }
});

致这些：

$('*:not(div)').on('click', function(e) {
    e.stopPropagation();
    if (isRight) {
        toLeft();
    }
});
$('p').on('click', function (e) {
    e.stopPropagation();
    if (!(isRight)) {
        toRight();
    }
});

【讨论】：

他应该怎么把盒子带回来？
他说这两个功能都是一键执行的。这可能是因为事件冒泡。 stopPropagation 停止上述冒泡。
不幸的是，这不起作用。现在回不来了。