Javascript 如何使下降div可点击？

我在falling div中制作了文字，我的代码示例如下：

但我不明白为什么我不能让div的文字可以点击。有时我可以单击它，然后用word查看警报消息，但有时我应该单击上面的word以查看警报消息。也许是因为这种动画方式很慢吧

我的代码的主要部分：

/* 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";

---

我编辑了你的小提琴并在这里解决了它：

绑定动画dom元素上的

click

事件有点棘手，如您所见，很难“捕获”它们

在这些情况下，最好绑定

mousedown

或

mouseup

。在这种情况下，我认为首选

mouseup

看看这是不是你的意思

希望有帮助

/*    
    // YOUR OLD METHOD
    leafDiv.onclick = function () {
        alert($(this).attr('data-text'));
    };
*/

// MY SUGGESTION
leafDiv.addEventListener('mouseup', function() {
    alert($(this).attr('data-text'));
});