使用文本框水印时 Javascript 事件不会冒泡

Question

我正在尝试在文本框上实现一个简单的水印，当文本框获得焦点时该水印就会消失。我发现这个 jQuery 插件看起来效果很好:

http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

水印的工作原理与此代码所宣传的一样:

<script type="text/javascript" src="/includes/_jQuery/_Library/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/includes/_jQuery/_plugs/_hint/jquery.hint.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("input[title!=]").hint();
    });
</script>

<table>
    <tr>
        <td><input type="text" title="Blah" /></td>
    </tr>
</table>

但是，当向表格的点击事件添加警报时，我发现当您点击文本框有文本的部分时，该事件不会冒泡。然而，当您单击文本框没有文本的部分时，它会很好地冒泡。以下是我用来创建警报的 jQuery 代码:

        $("table").click(function() {
            alert("blah");
        });

有人知道为什么当单击文本框的一部分而不是其他文本框时事件不会冒泡吗？

Answer 1

Does anybody have any idea why the event doesn't bubble up when part of the text box is clicked

这似乎是 Firefox 特有的错误，影响文本输入和文本区域。您只需几行代码即可重现它，它与 jQuery 无关，也与插件无关:

<form onclick="alert('hello')">
    <input type="text" value="hello!" onfocus="this.value=''">
</form>

(尽管我认为该插件确实存在一些相当重大的问题。它忘记在局部变量上使用“var”，让它们泄漏到全局范围。这使得同一页面上的多个“.blur”元素失败。加上“空”值仍将作为标题字符串提交到表单，并且您无法区分用户输入的与标题字符串匹配的“真实”值。)

仅当焦点事件中的输入值发生更改时，该事件才会无法冒泡。据推测，我的猜测是 Firefox 在内部识别出 click() 发生在输入内的文本上，并期望将该事件冒泡到每个文本的祖先上。但是，当直接父级上的单击事件导致 onfocus 触发时，该函数将从其父级中删除文本。现在没有任何东西可以发生点击事件，没有父链可以冒泡。