如果点击目标只在一个元素上而不是在另一个元素上，则运行特定的行为

Question

我已经有了一点jQuery密集的用户体验。我有一个问题，以确保一个特定的对话框打开，只有当点击目标是一个项目，而不是另一个。

基本上，我希望"编辑文本"对话框只显示当用户点击一个div与类.textbox(这恰好是在#contentdiv)，但不是当用户点击实例化的tinyMCE实例的一部分(如其选项等)。我已经设置了tinyMCE，以便在激活时，工具栏出现在#externalToolbarWrapper中。

这是我的代码:

    // 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();
}

但是，使用此代码，即使在content框之外以及TinyMCE工具栏的一部分(例如更改字体或大小)上进行单击，也会触发doStuff。所以我尝试添加更多的可能性:

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

然后我在控制台中输出:

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

但是在单击TinyMCE工具栏之后，我得到了以下结果:

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

和我尝试了一个额外的检查:

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

，但即使当点击发生在contentdiv之外和工具栏上，它仍然被计算，所以doStuff()总是触发。所以很明显，我尝试的所有条件都无法检测到点击是在TinyMCE工具栏上，而不是在文本框上。

我怎么能确保点击只触发我的功能时，点击是直接在textboxdiv，而不是其他?

Answer 1

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