contenteditable无法正常工作

Question

I have an element in my page that is meant to become editable once its parent is double clicked. so something like :

<div id="parent"><p class="editable"> enter text here </p></div>

and when the #parent is dblclicked I change the attribute contenteditable to true.

now the problem is that there are two things that prevent the user from editing the text once contenteditable is on: 1) the parent has lots of events and other stuff(including draggable and resizable) binded to it. If I do an unbind() to it, this part gets solved ( but I don't wanna do that ! ) 2) I also use this code to disable text selection in my page :

function disableSelection(target){
    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"
    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}
    target.style.cursor = "default"
} 

and I've tried to exclude editable elements using :

disableSelection($(":not(.editable)").get(0));

but it seems to disable everything in the page. When I get rid of it, it solves the other half of the problem. so pretty much if I want to enable editing, I have to unbind all the events from the parent, and also get rid of disableSelection, which is not possible for me.

Does anyone have any idea on how to fix this ? the solution must be easier than what I think, but I think I'm just confusing myself right now !

Answer 1

jQuery UI .draggable() and .resizable() have a cancel property for which contained elements should not trigger the dragging

http://jqueryui.com/demos/draggable/#option-cancel

Is it just those two you need to ignore?