我在下降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";
答案 0 :(得分: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
事件有点棘手,如你所见,很难“抓住”它们。
在这些情况下,绑定mousedown
或mouseup
要好得多。在这种情况下,我认为mouseup
是首选。
看一看,看看它是不是你的意思。
希望有所帮助。