Как определить, нажата ли мышь, кроме элемента $ (this)

Я хочу применить некоторый стиль, если мышь щелкнула внутри элемента (здесь .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

источник

2015-08-29 Aamu

Вы должны достичь этого путем простого CSS. См. Мой ответ –

@AnkitAgarwal Да, я видел ваш ответ и его очень интересный. Но мне нужно, чтобы он выполнял и другие функции jquery. +1 от меня. Это действительно очень хорошо. – Aamu

ok, поэтому, если у вас есть и другие обратные вызовы, которые вы можете добиться, прослушав событие «focus» на этом блоке. –

Вы можете связать события нажатия на body и проверить, если #a была нажата с помощью e.target функции

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

источник

2015-08-29 08:39:54 Akshay

Здравствуйте и спасибо. Но мне нужно изменить, если блок obj не щелкнут, потому что существует множество '.block'. Не могли бы вы изменить его, пожалуйста. [jsfiddle] (http://jsfiddle.net/r3tyva47/) – Aamu

Вы можете попробовать что-то вроде этого: -

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

источник

2015-08-29 08:40:00

Привет, спасибо. Но я думаю, что вы неправильно поняли мой вопрос. Блок, который я хочу, является фактическим блоком obj, а не блочным классом. Не могли бы вы изменить его соответствующим образом. – Aamu

@ Ааму Я тебя не понимаю. Не могли бы вы арендовать пост функциональный пример, который иллюстрирует вашу проблему на [jsFiddle] (http://jsfiddle.net/). –

Да, [здесь это] (http://jsfiddle.net/r3tyva47/) – Aamu

Лучший способ сделать это с помощью tabindex ANDD 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>

источник

2015-08-29 08:42:29

Управление JS по-прежнему возможно: свяжите прослушиватель кликов на 'document', поместите атрибуты' tabindex' на соответствующие элементы, а затем на нажмите «document.activeElement» и сделайте что-нибудь с ним. – Xufox

делает это в 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>

источник

2015-08-29 09:09:52 maioman

Не могли бы вы обновить свой ответ в соответствии с моим jsfiddle. – Aamu

@Aamu вот [скрипка] (http://jsfiddle.net/maio/ftq8a6ex/6/), реализованная в вашем сценарии – maioman

Добавьте класс CSS, представляющие стили и выбранное состояние текущего выбранного блока:

.block.selected { 
    background: red; 
}

внутри обработчика щелчка, удалите этот класс из блока, выбранных , (Если не выбраны блоки, removeClass() ничего не будет делать.) Затем добавить класс к вновь щелкнул блока:

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

Fiddle 1

Update

Как я знаю независимо от того, нажата ли она внутри блока или другого .block

Использовать hasClass() для сдерживания шахты, если вы нажали один и тот же блок в два раза:

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

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

Fiddle 2

источник

2015-08-29 09:45:37

Как узнать, нажата ли она внутри блока или другого .block или любого другого элемента? – Aamu

Смотрите мое обновление. –

Смотрите комментарии в рабочем примере кода ниже.

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

источник

2015-08-29 10:03:49

На основании ответа Акшай в:

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

источник

2015-08-29 11:05:57 Sphinxxx

Я попытался использовать ваш скрипт, но он не работает. Не могли бы вы попробовать мой [jsfiddle] (http://jsfiddle.net/Aamu/ftq8a6ex/3/). – Aamu

Обновлен скрипт, в котором используется '.closest()' jQuery ', чтобы найти контейнер' .block' любого элемента с щелчком: http://jsfiddle.net/ftq8a6ex/5/ – Sphinxxx

Как определить, нажата ли мышь, кроме элемента $ (this)

ответ

Смежные вопросы