0

如果单击元素的祖先之一具有类“文本框”并且没有一个祖先具有类“mceExternalToolbar”，我需要执行某个操作。如果一个对象有一个父“mceExternalToolbar”，那么它肯定有一个父“文本框”，但反之则不然。

我正在使用这个：

$('#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 在文本框元素中创建一堆元素，包括一个类为“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>
4

2 回答 2

1

简化你的逻辑，你想要所有.textbox不是.mceExternalToolbar.

在生成你的 tinyMCE 后试试这个：

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

小提琴

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

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

小提琴

当一个元素被点击时，点击事件将冒泡到.textbox我附加监听器的元素，其中不包括.mceExternalToolbar.

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

于 2012-09-08T11:13:09.647 回答
1

据我所知，您只需要在用户实际单击文本区域部分时的单击事件#content。如果我错了，请纠正我。

$('#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 语句有什么问题。!$etoolbar.length对于具有 null 或未定义长度的元素不是一个很好的检查。在要检查变量是否存在的情况下，您可以使用它。

if ( typeof $etoolbar !== 'undefined' )
{
    // Do stuff with $etoolbar
}
于 2012-09-08T10:54:28.470 回答