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?