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

Question

我有一个画布列表，如下所示：

<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>

我想为所有五个拉票人写一个活动听众：

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

我想知道用户在事件处理程序中单击了哪个画布。有办法知道吗？如果我为这五个画布编写五个事件处理程序，那么代码将过于难看。

Answer 1

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

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

将为您提供ID