如何使div下降可點擊？

Question

我在div降級中做了字，我的代碼示例在這里：

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

但是我不明白為什么我不能在div的clickable中添加文字。 有時我可以單擊它，然后看到帶有單詞的警報消息，但有時我應該單擊上面的單詞以查看警報消息。 也許是因為這種動畫方式非常慢？

我的代碼的主要部分：

/* 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'));
});

將click事件綁定到動畫dom元素上有些棘手，而且如您所見，很難“捕獲”它們。

在這些情況下，最好綁定mousedown或mouseup 。 在這種情況下，我認為mouseup是首選。

看一看，看看這是否是您的意思。

希望能有所幫助。