0

ユーザーが値を編集できる HTML テーブルにフィールドがあります。ユーザーがそのフィールドのセルの 1 つをクリックすると、このセルにテキストエリアが表示され、ユーザーは必要に応じて編集し、そのテキストエリアの外をクリックすると、通常のテキストに戻ります。ご存知のように、標準的なものです。

テキストエリアエディタ

これはすべてonfocusイベントとonblurイベントで適切に機能しますが、1 つのことを除いて、テキストエリア内をクリックすると(例: 2 つの文字の間をクリックしてテキストの特定の部分を編集したい)、onblurイベントがまだ呼び出されます。 、したがって、テキストエリアを閉じますが、これは私が望むものではありません。

イベントが呼び出される理由を理解するのに苦労しています。これが、私が聞いたイベント伝播と呼ばれる現象ですか？この動作を回避または修正するにはどうすればよいですか?

状況に関連する私のコードは次のとおりです（少し軽くなりました）：

Javascript

// Create a function that updates a table cell once the textarea loses focus (do not be confused with "losing its Ford Focus")
function createBlurFunction( cell, textArea, functionName ) {
    return function() {

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                var result = JSON.parse(xmlhttp.responseText)[0];

                /* Do stuff with AJAX result */
            }
        }

        // Empty cell
        cell.innerHTML = "";

        // Send AJAX request
        xmlhttp.open("GET","Some AJAX parameters", true);
        xmlhttp.send();
    }
}

// textArea is already defined somewhere else
textArea.addEventListener('blur', createBlurFunction( cell, textArea, cell.title ), false);

ありがとう！

編集1：

Web ページの別の場所 (外側をクリックすると消えるテキストエリア) で同様の構造を使用しましたが、動作が異なります。内側をクリックしてもテキストエリアは消えません。

ただし、上記のコードからコピー/貼り付けを使用したため、コードエラーか何かを疑っている可能性があります...

4

1 に答える 1

1

You could put the blur function on a timeout and in your focus listener clear the timeout.

var timer;
function createBlurFunction() {
    var myFunc = function() { ... }
    return function() {timer = setTimeout(myFunc(),300);};
}

function myFocusFunction() {
    clearTimeout(timer);
    //do stuff
}
于 2013-06-12T15:17:55.283 に答える