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 回答