如何使div可点击?

时间:2013-10-22 05:48:44

标签: javascript

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

1 个答案:

答案 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事件有点棘手,如你所见,很难“抓住”它们。

在这些情况下,绑定mousedownmouseup要好得多。在这种情况下,我认为mouseup是首选。

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

希望有所帮助。