可拖动取消触发模糊事件

Question

I have a draggable div which of course could be dragged around. Inside, I have input text which has two events (focus and blur). Also inside, I have another div which serve as draggable cancellation div (dragging that div prevent any drag to occur).

you could see it here: http://jsfiddle.net/wUDzh/4/

• Clicking the input box would trigger focus event and clicking outside main div (the red one) would trigger blur event. This is fine.
• Clicking or dragging the main div would NOT trigger blur event. That's what I want.
• The problem is, clicking the cancellation div (the blue one) cause blur event of the input box to occur. Which is make sense, but that's not what I want.

is there any way to prevent blur event to occur just like the behavior of the main div?

thx

Answer 1

You could do

$("#text").blur(function(e)
{
   // alert('a');
    if(e.target.id === 'text'){
        //this prevents other blur handlers from firing
        e.stopImmediatePropagation();
        //this prevent the default action and returns
        return false;
    }
   $(this).val("I've got blur");
});

fiddle here http://jsfiddle.net/wUDzh/6/

Answer 2

To prevent the input field from blurring when you click the cancellation div , simply do:

    $('#cancel').mousedown(function(e) {
        e.preventDefault();
    });

See fiddle