Hello everyone,
here come my problem I am registering dblclick event on some p tags, when the user double click on this tag he can edit the content. So far so good the only problem if the p tag contain other tags and the user click on this only the content of that tag is editable.
to clarify a bit here come an sample
<html>
<head>
<title>Test Event</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
$(function(){
$('#catchme').bind('dblclick', function(e){
alert(e.target.innerHTML);
});
});
});
</script>
<style>
.bk_yellow {
background-color: yellow;
}
</style>
</head>
<body>
<p id="catchme">Lorem ipsum dolor sit amet, <span class="bk_yellow">consectetur adipiscing elit. Phasellus</span> tempor nisl a velit commodo pellentesque. Pellentesque vitae posuere quam. Ut vitae justo nec quam bibendum placerat eu et diam. Morbi nec tellus sit amet libero lacinia vestibulum. Donec vulputate libero eget enim rhoncus dapibus. Sed mattis lobortis est sit amet facilisis. Proin porta lobortis commodo. Sed quis erat a elit malesuada tincidunt at in dui. Nunc sit amet pellentesque odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus dictum justo sed enim pharetra sollicitudin. Cras at tortor ante, at interdum nisi. Proin pulvinar sodales imperdiet. Aliquam mi ipsum, suscipit tincidunt lobortis eget, venenatis nec lorem. Sed euismod enim volutpat nisi vulputate iaculis. </p>
</body>
</html>
If you click on the not yellow text everything is fine, if you click on the yellow only the contain of the span is dumped. Is there a way to make dom actually reference the element which the event have been registered?
I am using this technique in our home brow CMS and this bug is kind of annoying.
I suppose if there is no way to avoid this behavior I would have to attach the element to events somehow.
PS: The sample is using jquery but the actual CMS use ExtJS so any jquery specific answer won't be ok.