Question

我在下降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";

Answer 1

我编辑了你的小提琴并在这里解决了它：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是首选。

看一看，看看它是不是你的意思。

希望有所帮助。

如何使div可点击？

1 个答案: