javascript - HTML5如何获取被点击对象的id？

Question

我有一个这样的 Canvas 列表:

<div id="lists" style="position:absolute">
        <ul>
            <li>
                <canvas id="product1" class="product" width="1200" height="360"></canvas>
            </li>
            <li>
                <canvas id="product2" class="product" width="1200" height="360"></canvas>
            </li>
            <li>
                <canvas id="product3" class="product" width="1200" height="360"></canvas>
            </li>
            <li>
                <canvas id="product4" class="product" width="1200" height="360"></canvas>
            </li>
            <li>
                <canvas id="product5" class="product" width="1200" height="360"></canvas>
            </li>
        </ul>
    </div>

我想为所有五个 Canvas 编写一个事件监听器:

$(".product").mousedown(function(e) {

}

我想知道用户在事件处理程序中单击了哪个 Canvas 。有办法知道吗？如果我为五个 Canvas 编写五个事件处理程序，代码将变得太难看。

Answer 1

答案就在事件对象和调用它的上下文中，它们是用回调函数解析的。您可以查看 $(this) 或 http://api.jquery.com/event.target/ .

$(".product").mousedown(function(e) {
    alert($(this).attr('id'));
});

会给你ID