Question

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();
    }
});

}）;

Answer 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

Answer 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

Answer 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();
    }
});

在布尔值更改后，jquery单击处理额外函数

3 个答案: