1

テキスト ボックスにフォーカスが移ると消える単純な透かしをテキスト ボックスに実装しようとしています。うまく機能しているように見えるこの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");
        });

テキスト ボックスの一部がクリックされたときにイベントがバブルアップしない理由を知っている人はいますか?

4

1 に答える 1

1

テキストボックスの一部がクリックされたときにイベントがバブルアップしない理由を誰か知っていますか?

テキスト入力とテキストエリアの両方に影響する Firefox 固有のバグのようです。ほんの数行のコードで再現できます。jQuery 関連でもプラグインでもありません。

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

(ただし、プラグインにはかなり重大な問題がいくつかあると思います。ローカル変数で 'var' を使用するのを忘れて、グローバル スコープに漏れさせます。これにより、同じページの複数の '.blur' 要素が失敗します。プラス 'empty'値は引き続きタイトル文字列としてフォームに送信され、タイトル文字列と一致するユーザーが入力した「実際の」値を区別できません。)

入力の値がfocus イベントで変更された場合にのみ、イベントはバブリングに失敗します。私の推測では、Firefox は入力内のテキストで click() が発生したことを内部的に認識しており、そのイベントが各テキストの先祖にバブルアップすることを期待しています。しかし、直接の親のクリック イベントによって onfocus が起動されると、その関数はその親からテキストを削除します。これで、クリック イベントが発生したものは何もなくなり、バブル スルーする親チェーンもなくなりました。

于 2009-03-10T20:16:58.530 に答える