How to detect clicking off of an element

Question

Basically I want user to click on any .editable item, which makes an input appear, copy its styles, and then if they click anywhere else, I want the input to disappear and the changes to save. I'm having difficulty making this work. I've seen a solution using event.stopPropagation, but I don't see how to include it the way I have my code structured:

$(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 function from here

I need to distinguish between clicks on the editable object, and clicks away from it, even if that click is onto a different editable object (in which case it should call 2 events).

I suppose that capturing a click on the document would work, but I'm not comfortable enough with topics like event bubbling to say how or when this should be done. — Blazemonger, Aug 19 '11 at 19:06

Arnaud Le Blanc · Accepted Answer · 2011-08-19T20:17:36.650

2

Try this:

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

This works by checking if the clicked element, or any of its parents, is #textEdit.

The event.stopPropagation solution can be implemented this way:

// 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/

edited Aug 19 '11 at 20:17

answered Aug 19 '11 at 19:09

Arnaud Le Blanc

98,321
23
206
194

Exactly what I would have thought of, if I would have been thinking of it. – Blazemonger Aug 19 '11 at 19:17
hrm for some reason i'm not getting either method to work.. the first method never fires the stuff in the filter, and the second always does. I was trying to transform it into a [jsfiddle](http://jsfiddle.net/cutcopypaste/dDFNM/), but it's messing up – Damon Aug 19 '11 at 19:59
1

You need to stop the progation of the event in `$(".editable").click()`, else the event propagates to the body and closes the input immediately. I've updated the first code a bit and added working jsfiddles. – Arnaud Le Blanc Aug 19 '11 at 20:18

score 0 · Answer 2 · answered Aug 19 '11 at 19:08

0

The problem is that you are not correctly binding to the editObj. Perhaps it will help if you move the binding to inside your .editable click handler, or even better use live() or delegate().

$("html").not(editObj)... is bound once at document ready time, and at that time editObj is false

answered Aug 19 '11 at 19:08

beefyhalo

1,691
2
21
33

that is helpful.. I was misunderstanding binding (and probably still am). I had it inside before and it wasn't working. I'll see what I can figure out – Damon Aug 19 '11 at 19:23
I suggest checking out `delegate()`. Also, You can use a simple if statement inside your handler to cancel the event if it is the `editObj` – beefyhalo Aug 19 '11 at 19:28

How to detect clicking off of an element

2 Answers2