Question

如果其中一个被点击的元素的祖先具有类'textbox'并且没有祖先具有类'mceExternalToolbar'，我需要执行某个操作。如果一个对象有一个父'mceExternalToolbar'，那么它肯定有一个父'textbox'，但反之则不然。

我正在使用它：

$('#content').click(function(e){
var $eparent = $(e.target).closest('.textbox');
var $etoolbar = $(e.target).closest('.mceExternalToolbar');

// what's wrong with this if condition?
if($eparent.length==1 && !$etoolbar.length)
{
   //do something
}
});

我觉得这很简单，但似乎没有用。 $etoolbar == NULL无效jquery但是当我在条件中使用它时，条件至少第一次运行（虽然在控制台中给出了错误）。

我的逻辑或我使用jQuery的方式有问题吗？

修改

HTML代码如下，我将简要解释一下。

我有一个内容框，我在其中动态创建文本框（我正在为每个文本框使用tinyMCE富文本编辑器）。有时候文本框会被“激活”（即tinyMCE在textbox元素中创建一堆元素，包括带有“mceExternalToolbar”类的div。）一个人可以点击大内容div上的任何地方，但只有当他们点击时一个文本框我想做一个特定的动作。此外，只有当他们的点击不在文本框的mceExternalToolbar区域时，我才会接受他们的点击。

<div id="content" style="top:195px; position:absolute; height:300px; width:600px;border: 1px solid black;">

    <!-- THE BOX BELOW WAS CREATED DYNAMICALLY -->
    <div id="textbox_1" class="textbox" style="top: 101px; left: 112px; cursor: move;" aria-disabled="true">
        <div id="textbox_1_menu" class="menu"> <!-- menu items --> </div>
        <div id="textareacontainer_1" class="textareaedit">
            <textarea id="textarea_1" class="tinymce" style="display: none;" aria-hidden="true">
                <p>Testing this textbox</p>
            </textarea>
            <span id="textarea_1_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="textarea_1_voice"></span>
            <div style="position:relative">
                <!-- THIS HERE IS THAT PARENT WHO, IF ANY OF ITS CHILDREN ARE CLICKED, I WILL NOT ENTERTAIN IT -->
                <div id="textarea_1_external" class="mceExternalToolbar" style="display: block; top: -28px;">
                    <a id="textarea_1_external_close" class="mceExternalClose" href="javascript:;"></a>
                    <table id="textarea_1_tblext" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr role="presentation">
                                <td class="mceToolbar mceLeft" role="presentation">
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END CONTENT BOX -->
    </div>
</div>

Answer 1

从我收集的内容来看，当用户实际点击#content的textarea部分时，您只需要点击事件。如果我错了，请纠正我。

$('#content').on('click', 'textarea', (function(e)
{
    e.stopPropagation() // Stops click event bubbling up to other elements

    // Execute code, this will only be run if a user
    // Clicks on a 'textarea' element within `#content`
});

你问你的if语句有什么问题。对于具有null或未定义长度的元素，!$etoolbar.length不是一个好的检查。如果要检查变量的存在，可以使用它。

if ( typeof $etoolbar !== 'undefined' )
{
    // Do stuff with $etoolbar
}

Answer 2

简化您的逻辑，您希望所有.textbox不是.mceExternalToolbar的后代。

生成tinyMCE后尝试此操作：

$('#content .textbox:not(.mceExternalToolbar .textbox)').click(function() {
    //do stuff
});

Fiddle

或者如果你需要事件委托，正如你所说的“动态添加”（注意大多数插件初始化是同步的）：

$('#content').on('click', '.textbox:not(.mceExternalToolbar .textbox)', function() {
    //do stuff
});

Fiddle

单击某个元素时，点击事件将冒泡到我将侦听器附加到的.textbox元素，但不包括.mceExternalToolbar的后代。

这样，通过直接绑定（第一个代码）或匹配委托事件（第二个代码）的选择器来附加侦听器的.textbox的后代将在单击时触发处理程序，而不必检查对于.textbox祖先。

jquery检查元素是否有一个父元素而没有另一个元素

修改

2 个答案: