Question

我有一个textarea和一个提交按钮。当用户在textarea外部单击时，将运行脚本，如果textarea中没有任何内容，则会隐藏提交按钮。但是，如果您在textarea外部单击，我不希望它是因为当您单击提交按钮时它会运行操作，并隐藏按钮。它不应该。因此，我需要检测用户何时在textarea的包装器div之外单击并提交按钮并运行脚本。

 <div class="wrapper">
     <textarea class="textarea"></textarea>
     <input type="submit" class="submit" value="submit"/>
 </div>

Answer 1

检查事件的'target'属性，该属性将告诉您实际点击了哪个元素。然后，您可以执行条件语句以确保提交按钮不会分派事件。

jQuery docs：http://api.jquery.com/event.target/

Mozilla文档：https://developer.mozilla.org/en-US/docs/DOM/event.target

Answer 2

这样的事情：

$(document).ready(function() {
    var $text = $("textarea.textarea"),
        $btn = $("input.submit");
    $(document).click(function(e) {
        if (!$text.is(e.target) && !$btn.is(e.target) && $text.val() == "")
            $btn.hide();
        else
            $btn.show();
    });
});

也就是说，请记住，点击事件会冒泡到文档，但您仍可以使用event.target确定最初点击的元素，在文档接收的任何点击事件上测试点击是否在除了textarea或按钮，如果是这样，并且textarea为空隐藏按钮，否则显示它。

演示：http://jsfiddle.net/HpmDF/

请注意，使用类来识别单个控件并不是最佳计划，而不是id的用途。如果可以有多个textarea和相关按钮，则需要使用不同的解决方案。

P.S。另请注意，您明确询问了＆＃34;点击次数＆＃34;这就是我提供的内容，但您需要允许用户通过键盘进行选项卡...

检测用户在textarea外部单击但不在元素外部时单击

2 个答案: