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>

但是，当向表的click事件添加警报时，我发现当您单击包含文本的文本框部分时，事件不会冒泡。但是，当您单击没有文本的文本框部分时，它会冒泡。这是我用来创建警报的jQuery代码：

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

是否有人知道为什么在单击文本框的一部分时事件不会冒泡，而不是另一个？

Answer 1

是否有人知道为什么在点击文本框的一部分时事件不会冒泡

它似乎是一个特定于Firefox的错误，同时影响文本输入和textareas。您可以使用几行代码重现它，它不是与jQuery相关的或与插件有关：

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

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

只有在焦点事件中输入值更改时，事件才会冒泡。推测性地，我的猜测是Firefox在内部认识到click（）发生在输入内的文本上，并期望在每个文本的祖先上冒泡该事件。但是当直接父项上的click事件导致onfocus触发时，该函数将从其父项中删除该文本。现在没有任何事情可以发生点击事件，没有任何母链可以通过。

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

1 个答案: