1

落下する div で単語を作成しました。コードの例は次のとおりです。

http://jsfiddle.net/apHLu/674/embedded/result/

しかし、divのクリッカブルで単語を作成できない理由がわかりません。クリックすると警告メッセージが単語で表示される場合もありますが、上の単語をクリックして警告メッセージを表示する必要がある場合もあります。たぶん、このアニメーションの方法が非常に遅いからでしょうか?

私のコードの主要部分:

/* Start by creating a wrapper div, and an empty img element */
var leafDiv = document.createElement('div');
var image = document.createElement('div');

/* Randomly choose a leaf image and assign it to the newly created element */
image.innerHTML = phrase[counter];
image.style.padding = "40px 0 0 20px";

leafDiv.style.backgroundColor = "#eee";
leafDiv.setAttribute('data-url', counter);
leafDiv.setAttribute('data-text', phrase[counter]);

leafDiv.onclick = function () {
    alert($(this).attr('data-text'));
};


leafDiv.style.top = "-100px";
4

1 に答える 1

0

私はあなたのフィドルを編集し、ここで解決しました：http://jsfiddle.net/apHLu/675/

/*    
    // YOUR OLD METHOD
    leafDiv.onclick = function () {
        alert($(this).attr('data-text'));
    };
*/

// MY SUGGESTION
leafDiv.addEventListener('mouseup', function() {
    alert($(this).attr('data-text'));
});

アニメーション化された dom 要素にイベントをバインドclickするのは少しトリッキーです。ご覧のとおり、それらを「キャッチ」するのは困難です。

これらの場合、mousedownorをバインドする方がはるかに優れていmouseupます。この場合、私mouseupは好ましいと思います。

見て、それがあなたが意図したものかどうかを確認してください。

それが役立つことを願っています。

于 2013-10-22T05:55:59.730 に答える