Отключить щелчок в любом месте, кроме одной ячейки (в выбранной строке), когда ячейка входит в режим редактирования

Как отключить click во всех ячейках сетки, кроме одной ячейки в строке? Я пытаюсь отключить щелчки по любой ячейке в сетке, когда ячейка входит в режим редактирования. Итак, я попытался:

$('#QCStatus tr td').bind('click',function() {
        return false;
});

//QCStatus is the id of the grid

Чтобы включить щелчок по ячейке, в той же строке, которая редактируется, я пробовал:

$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
        return true;
});

Но это не имеет никакого эффекта, поскольку щелчок отключен первым фрагментом. Каков правильный способ добиться этого?


person Suhail Gupta    schedule 07.12.2015    source источник
comment
Попробуйте event.stoppropagation()   -  person Rayon    schedule 07.12.2015
comment
Можешь так сделать? '$('#QCStatus).bind('click',function() { // идентифицируем вашу ячейку и делаем что-то //еще, возвращаем false });'   -  person Pedram    schedule 07.12.2015


Ответы (3)


Вы можете исключить выбранную строку с помощью :not() здесь:

$('#QCStatus tr:not(.selected) td').on('click', function(e) {
  $('pre').prepend('event :::: '+e.type+'\n');
  return false;
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
  <tr><td>click</td></tr>
  <tr class='selected'><td>click</td></tr>
  <tr><td>click</td></tr>
  <tr><td>click</td></tr>
</table>

<pre></pre>

Это привяжет щелчок ко всем td, которые не являются дочерними элементами tr.selected.


В соответствии с вашим комментарием вы можете добавить больше:

Как я могу просто исключить td в выбранной строке td[aria-describedby="QCStatus_ActionIcons"]?

$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
  $('pre').prepend('event :::: '+e.type+'\n');
  return false;
});
person Jai    schedule 07.12.2015
comment
Как я мог просто исключить td в выбранной строке td[aria-describedby="QCStatus_ActionIcons"]? - person Suhail Gupta; 07.12.2015
comment
Таким же образом вы можете добавить это: $('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])') - person Jai; 07.12.2015
comment
Каким будет лучший способ удалить только что добавленный обработчик click? (or to revert to the default state i.e make everything clickable) - person Suhail Gupta; 07.12.2015
comment
Я думаю, вам нужно использовать .off() и .on() для привязки/отвязки событий. - person Jai; 07.12.2015
comment
Может ли он отменить все связанные с ним события кликов? Мне просто нужно отвязать текущее прикрепленное событие. - person Suhail Gupta; 07.12.2015
comment
На самом деле это довольно сложно, лучше опубликовать новый вопрос. - person Jai; 07.12.2015

Используйте event.stoppropagation() для исключения элемента для события click. Это предотвращает дальнейшее распространение текущего события.

$('tr').on('click', function() {
  console.log('clicked!');
});
$('.disabled').on('click', function(e) {
  e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>

</table>

Скрипка здесь

person Rayon    schedule 07.12.2015

добавьте атрибут «отключено» к тем кнопкам, где вы хотите отключить клик.

для отключенного атрибута div не работает.

в этих случаях используйте "pointer-events:none;" в вашем css этого конкретного div.

person sridhar reddy    schedule 07.12.2015