javascript – 如何检测单击元素

2023年12月19日 160次阅读

基本上我希望用户点击任何.editable项目,使输入显示,复制其样式,然后如果他们点击其他地方,我希望输入消失和更改保存.我很难完成这项工作.我已经看过使用event.stopPropagation的
solution,但是我没有看到如何以我的代码结构的方式包含它：

$(function() {
    var editObj = 0;
    var editing = false;   

    $("html").not(editObj).click(function(){
         if (editing){
                $(editObj).removeAttr("style");
                $("#textEdit").hide();
                alert("save changes");
            }
    });    


    $(".editable").not("video, img, textarea")
        .click(function(event) {

            editObj = this;
            editing = true;

            $("#textEdit")
                .copyCSS(this)
                .offset($(this).offset())
                .css("display", "block")
                .val($(this).text())
                .select();

            $(this).css("color", "transparent");


    });
}

copyCSS功能从here开始

我需要区分可编辑对象的点击次数和点击它,即使该点击是在不同的可编辑对象上(在这种情况下它应该调用2个事件).

最佳答案 试试这个：

$('body').click(function(event) {
    var parents = $(event.target).parents().andSelf();
    if (parents.filter(function(i,elem) { return $(elem).is('#textEdit'); }).length == 0) {
        // click was not on #textEdit or any of its childs
    }
});

$(".editable").not("video, img, textarea")
        .click(function(event) {

    // you need to add this, else the event will propagate to the body and close
    e.preventDefault();

http://jsfiddle.net/dDFNM/1/

这通过检查被点击的元素或其任何父元素是否为#textEdit来工作.

event.stopPropagation解决方案可以这样实现：

// any click event triggered on #textEdit or any of its childs
// will not propagate to the body

$("#textEdit").click(function(event) {
    event.stopPropagation();
});

// any click event that propagates to the body will close the #textEdit

$('body').click(function(event) {
    if (editing) {
        $("#textEdit").hide();
    }
});

http://jsfiddle.net/dDFNM/2/

点赞