堆棧內存溢出
  簡體   English   中英

如何檢測是否單擊了$（this）元素以外的鼠標

[英]How to detect if mouse is clicked other than $(this) element

 原文  2015-08-29 08:34:00  7   7    javascript/ jquery/ html/ css

問題描述

如果在元素中單擊鼠標（此處為.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

7 個解決方案

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

更好的方法是使用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>

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

你可以嘗試這樣的事情： - 

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

解決方案3
 3 已采納  2015-08-29 08:39:54

您可以綁定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>

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

添加一個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

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

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

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

請參閱下面的工作示例代碼中的注釋。 

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

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

根據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/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 選擇一個不同於單擊的元素 如何檢測單擊的元素是否不是jQuery中元素的子級？ 如何在jQuery中檢測鼠標元素？ 如何檢測鼠標光標是否超出元素？ 如何檢測特定元素？ 如何檢測我從數組中單擊的元素 如何在第二次單擊時釋放鼠標之前檢測雙擊？ React JS如何更改元素中的字體顏色而不是單擊按鈕onClick？ 如何獲得元素ID +單擊元素的鼠標按鈕？ 檢測單擊時的鼠標移動並檢測雙擊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM