0

I've got a bit of a jQuery intensive user experience. I'm having an issue in making sure a certain dialog box opens only when the click target is one item but not another.

Basically, I want the "edit text" dialog to show up only when the user clicks on a div with class .textbox (which happens to be in #content div), but not when the user clicks on a part of the instantiated tinyMCE instance (such as its options etc). I've set up tinyMCE so that when activated, the toolbar appears in #externalToolbarWrapper.

This is my code:

    // check if the click's target element is parented by a textbox or mceLayout.
    var $etextbox = $(e.target).closest('.textbox');
    var $etoolbar = $(e.target).closest('.mceLayout');

if($etextbox.length==1 && $etoolbar.length == 0) // only the text parent and not toolbar is clicked
{
         doStuff();
}

However, using this code, doStuff is triggered even when the click was made outside the content box, and on a part of the TinyMCE toolbar (such as to change a font or size). So I tried adding a few more possibilities:

    var $eformat = $(e.target).closest('#externalToolbarWrapper');
    var $econtent = $(e.target).closest('#content');

And then I output in the console:

console.log("textbox: " + $etextbox.length);
console.log("etoolbar: " + $etoolbar.length);
console.log("eformat: " + $eformat.length);
console.log("econtent: " + $econtent.length);

But after a click on the TinyMCE toolbar, I get the following results:

etextbox: 0 
etoolbar: 0 
emenu: 0 
eformat: 0 
econtent: 1

and I tried an additional check:

if($etextbox.length==1 && $etoolbar.length == 0 && $etoolbar.length==0 && $eformat.length==0)

but even when the click takes place outside the content div and on the toolbar, it's still counted and so doStuff() always triggers. So apparently none of the conditions I tried help to ever detect that the click was made on a TinyMCE toolbar and not on a textbox.

How can I make sure the click only triggers my function when the click is directly on the textbox div, and not otherwise?

4

1 回答 1

0

最后，我通过检查e.pageX和e.pageY坐标并确保它们不在#contentdiv 中解决了这个问题。因此，如果点击在内容之外，它不会触发doStuff().

于 2013-06-08T08:40:06.527 回答