Question

基本上我希望用户点击任何可编辑的项目，这会使输入显示，复制其样式，然后如果他们点击其他任何地方，我希望输入消失并保存更改。我很难完成这项工作。我见过使用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");


    });
}

来自here

的copyCSS功能

我需要区分可编辑对象的点击次数和点击次数，即使该点击次数位于不同的可编辑对象上（在这种情况下它应该调用2个事件）。

Answer 1

试试这个：

$('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/

Answer 2

问题是您没有正确绑定到editObj。如果你将绑定移动到你的.editable点击处理程序中，或者更好地使用live（）或delegate（），它可能会有所帮助。

$("html").not(editObj)...在文档就绪时绑定一次，当时editObj为false

如何检测单击元素

2 个答案: