0

Javascript初心者... css疑似クラス「アクティブ」に似た機能を追加しようとしていますが、バニラJavaScriptです。ボタンを押したときにボタンの色を変更し、ボタンを離すと元の色に戻そうとしています。ここに私が持っているものがあります:

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);

...

btnEvent = function (e) {
    var storedColor;
    if (e.type == 'mousedown') {
        storedColor= e.target.style.backgroundColor;
        e.target.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = storedColor;
    };
};

これは機能しません。マウスアップ時に「storedColor」が定義されていません。同じ関数オブジェクトが共有されておらず、2 つ作成されているためでしょうか。これはどのように行うことができますか？同じ要素にアタッチされた 2 つ以上のイベント リスナーが、呼び出し間でデータを保持できる共通のターゲット オブジェクト (関数) を共有することは可能ですか?

ありがとう。

4

2 に答える 2

0

要素に固有のこの状況では、おそらく要素自体に色を保存するのが最適です。

btnEvent = function (e) {
    var elm = e.target,
        color;

    if (e.type == 'mousedown') {
        elm.setAttribute("data-storedColor", e.target.style.backgroundColor);
        elm.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        color = elm.getAttribute("data-storedColor"):
        if (color) {
            elm.style.backgroundColor = color;
            elm.removeAttribute("data-storedColor");
        }
    };
};

そこでは、 data-* attributeに色を保存しています。「expando」プロパティ (要素に割り当てるアドホック プロパティ、たとえばelm.mySpecialProperty = ...) を使用することもできますが、expando は一般的にベスト プラクティスではありません。

補足:

  • btnEventどこかで変数を宣言していない限り、 The Horror of Implicit Globals の餌食になります。その前に a を付けるか、式ではなくvar関数宣言にすることをお勧めします。

    function btnEvent(e) {
    // ...implementation...
}

  • addEventListenerには 3 番目の引数があり、おそらく指定する必要があります。一部のブラウザーはそれについてうるさいことを思い出しているようです (ただし、最新のブラウザーはおそらくそうではありません)。（値が必要ですfalse。）

于 2012-12-30T08:38:04.507 に答える
0

ローカル変数であり、関数が呼び出されるstoredColorたびに作成されるため、バリアントは機能しません。btnEvent

btnEvent関数は JavaScript のオブジェクトであるため、関数に色を格納できます。

デモ: http://jsfiddle.net/LQSe4/

var btnEvent = function (e) {
    if (e.type == 'mousedown') {
        btnEvent['storedColor'] = e.target.style.backgroundColor;
        e.target.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = btnEvent['storedColor'];
    };
};

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);

または、元の色を DOM 要素に保存することもできます (デモ: http://jsfiddle.net/rk33f/ ):

var btnEvent = function (e) {
    if (e.type == 'mousedown') {
        e.target['storedColor'] = e.target.style.backgroundColor;
        e.target.style.backgroundColor = '#F00';
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = e.target['storedColor'];
    };
};

var myButton = document.getElementById('btn');

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);​
于 2012-12-30T08:30:43.210 に答える