向 DIv 中的所有子元素添加鼠标事件

Question

这是我正在尝试做的事情：

    $(window).mousedown(function(e) {
        switch (e.which) {

            // left click
            case 1:
                e.preventDefault()
                $(e.target).css("border", "2px solid red");
                break;

            // Middle  click
            case 2:
                e.preventDefault()
                $(e.target).css("border", "");
                break;
        }
    });

以下代码效果很好。每当我单击任何元素时，它都会创建一个红色框，当我单击鼠标中键时它删除了红色框。

但是：我想要的是我想要相同的功能，但只想应用于特定的 div 元素。

  <div class="col-md-5" style="border: 1px solid black; margin: 1px; overflow-y: scroll; height: 450px;" >
                    <div id="webappcontents">
                        {{{this.html}}}
                    
                    </div>
                </div>

我想添加鼠标点击事件 div#webappcontents。我怎样才能做到这一点？这样 #webappcontents 中的所有内容都可以点击并创建红色框。

任何帮助都很棒。

Answer 1

您的代码：$(window).mousedown(function(e) { 捕获页面上的任何鼠标点击要指定 webappcontents div 将其更改为

$('#webappcontents').mousedown(function(e) {

尽管您可能只想以这种方式制作某些元素，就像在该容器内使用 class='clickable' 的所有元素一样...

$('#webappcontents div.clickable').mousedown(function(e) {
   // now you can access the element to modify with $(this)
   // $(this).addClass('clicked')

此外，确保此函数在页面加载后注册。一种方法是使用 jQuery document.ready

$(document).ready(function() {
   $('#webappcontents').mousedown(function(e) {
        // do stuff
   })
});

向 DIv 中的所有子元素添加鼠标事件

Add Mouse Event to all Child Elements in DIv

javascript

jquery

jquery-events