如何检测是否单击了$（this）元素以外的鼠标

Question

如果在元素中单击鼠标（此处为.block ），我想应用一些样式。 如果单击该元素，则通过$(this)获取该元素并设置样式。 此后，当用户点击$(this)元素以外的其他元素时，我想将其更改回默认样式。 如何检测鼠标是否被点击而不是$(this)元素。

js脚本到目前为止：

$( document ).ready(function() {

    // when a block is clicked get that specific block
    $('.block').click(function() {
        var block = $(this);
        block.css('background','red');
    });

    //if clicked other than the block do stuff

});

的jsfiddle

Answer 1

更好的方法是使用tabindex和css :focus选择器

 .container{ border:1px solid #333; width:200px; height:200px; } .block{ background-color: #ccc; width:50px; float:left; height:50px; margin:20px; } .block:focus{ background-color: red; outline:none }

 <div class="container"> <div class="block" id="block1" tabindex="1"> </div> <div class="block" id="block2" tabindex="1"> </div> <div class="block" id="block3" tabindex="1"> </div> <div class="block" id="block4" tabindex="1"> </div> </div>

Answer 2

你可以尝试这样的事情： -

$(document).ready(function () {

    // when a block is clicked get that specific block
    $('.block').click(function () {
        var block = $(this);
        block.css('background', 'red');
    });

    //if clicked other than the block do stuff
    $('html:not(.block)').click(function () {
        //your logic here
    });
});

FIDDLE DEMO

Answer 3

您可以绑定body上的click事件，并检查是否使用e.target函数单击了#a

 $('div').click(function () { $(this).css('background', 'red') }) $('body').click(function (e) { if ($(e.target).is($("#a"))) { } else { $('#a').css('background','tomato') } })

 div { width:100px; height:100px; background:tomato; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="a"></div>

Answer 4

添加一个CSS类，表示当前所选块的样式和选定状态：

.block.selected {
  background: red;
}

在单击处理程序中，从所选的块中删除该类。 （如果未选择任何块，则removeClass()将不执行任何操作。）然后将该类添加到新单击的块中：

$('.block').click(function() {
  $('.block.selected').removeClass('selected');
  $(this).addClass('selected');
});

小提琴1

更新

我如何知道是否在块或其他.block中单击了它

使用hasClass（）来确定您是否两次单击同一个块：

 $('.block').click(function() { if($(this).hasClass('selected')) { // do something here } $('.block.selected').removeClass('selected'); $(this).addClass('selected'); });

小提琴2

Answer 5

在JS中这样做会是这样的

 var globalRef; var inside = document.querySelectorAll('.inside'); document.querySelector('.block').addEventListener('click', function (e) { if (globalRef != undefined) { globalRef.style.background = 'none' } globalRef = e.target; e.target.style.background = 'red' }, false);

 .block { width:200px; height:200px; background:#ccc; } .inside { display:inline-block; width:100px; height:100px; border:1px solid green; box-sizing:border-box; float:left }

 <div class="block"> <div class='inside'></div> <div class='inside'></div> <div class='inside'></div> <div class='inside'></div> </div>

Answer 6

请参阅下面的工作示例代码中的注释。

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
            .block {
                background: gray;
                width: 100px;
                height: 100px;
                float: left;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="block" id="block1"></div>
        <div class="block" id="block2"></div>
        <div class="block" id="block3"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                /*
                Solution 1:
                This gathers all elements with the class 'block' and defines a click event on it.
                In the click event all elements with class 'block' are walked through. If an element
                has the same id as the current element's id, than do one thing else do another thing.
                In this example background color en content of the three divs are changed
                */
                $('.block').click(function(i) {
                    /*
                    Notice the usage of $(this) and this in the code below. $(this) Is the
                    jquery element while 'this' is the DOM element.
                    */
                    var block = $(this);
                    $(".block").each(function(){
                        if (this.id == block.attr("id")) {
                            this.innerHTML = ("My id is " + this.id);
                            this.style.background = "red";
                        } else {
                            this.innerHTML = "";
                            this.style.background = "gray";
                        }
                    })
                });
                /*
                Solution 2:
                For each element you want actions on, define a separate click event.
                */
                $('#block1').click(function(i) {
                  alert("You clicked me?");
                });
                $('#block2').click(function(i) {
                  alert("Why did you click me?");
                });
                $('#block3').click(function(i) {
                  alert("Hi there, what's new?");
                });
            });
        </script>
    </body>
</html>

Answer 7

根据Akshay的回答：

$('body').click(function (e) {
    var clicked = $(e.target);

    //See if the clicked element is (or is inside) a .block:
    var clickedBlock = clicked.closest('.block');
    if (clickedBlock.length) {
        clickedBlock.css('background', 'red');
    }

    //Remove the overridden background from other blocks:
    var allBlocks = $('.block');
    allBlocks.not(clickedBlock).css('background', '');
});

JSFiddle： http ： //jsfiddle.net/ftq8a6ex/5/

如何检测是否单击了$（this）元素以外的鼠标

问题描述

7 个解决方案

解决方案1
14 2015-08-29 08:42:29

解决方案2
5 2015-08-29 08:40:00

解决方案3
3 已采纳 2015-08-29 08:39:54

解决方案4
2 2015-08-29 09:45:37

解决方案5
1 2015-08-29 09:09:52

解决方案6
1 2015-08-29 10:03:49

解决方案7
1 2015-08-29 11:05:57

如何检测是否单击了$（this）元素以外的鼠标

问题描述

7 个解决方案

解决方案1 14 2015-08-29 08:42:29

解决方案2 5 2015-08-29 08:40:00

解决方案3 3 已采纳 2015-08-29 08:39:54

解决方案4 2 2015-08-29 09:45:37

解决方案5 1 2015-08-29 09:09:52

解决方案6 1 2015-08-29 10:03:49

解决方案7 1 2015-08-29 11:05:57

解决方案1
14 2015-08-29 08:42:29

解决方案2
5 2015-08-29 08:40:00

解决方案3
3 已采纳 2015-08-29 08:39:54

解决方案4
2 2015-08-29 09:45:37

解决方案5
1 2015-08-29 09:09:52

解决方案6
1 2015-08-29 10:03:49

解决方案7
1 2015-08-29 11:05:57