Запретить входной флажок от переключения <details> - PullRequest
Новая
       2

Запретить входной флажок от переключения <details>

9 голосов
/ 09 апреля 2019

У меня есть <input type="checkbox"> тег внутри <summary> внутри <details>, который, к сожалению, переключает <details>, чтобы открывать или закрывать, когда он отмечен или не отмечен, в отличие от этот вопрос относительно переключения пространствадетали , но, к сожалению, в моей версии Firefox для меня нельзя исправить одним и тем же методом.

См. фрагмент ниже: 

$('input').change(function(e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

Как предотвратить открытие / закрытие <details>, установив или сняв флажок?(Кроме очевидного ответа о перемещении тега <input> за пределы <summary>. Мне любопытно, почему это происходит)

Редактировать

Как упомянуто@ Терри, а затем подтвердил, что эта проблема не затрагивает ни Safari, ни Chrome, и даже Firefox в Windows, кажется, действует по-другому (он просто полностью игнорирует щелчки на флажке).Подтверждено, что влияет на Firefox 66.0.2-3 в OS X Mojave 10.14.4.

Также, если вы фиксируете событие нажатия на <summary> и return false;, флажок все равно переключает <details>, даже если нажатьв других местах <summary> нет.

Редактировать 2

Это ошибка Firefox, исправленная в версии 67.

Ответы [ 6 ]

6 голосов
/ 21 мая 2019

Добро пожаловать в несовместимый мир браузеров! : D

Прежде всего, вы должны рассмотреть возможность работы с событием click вместо события change, потому что если пользователь нажимает на флажок, сначала запускается событие click, а затем * Событие 1008 *, которое означает, что событие click отвечает за поведение переключения, и снова не событие change.

Итак, и в Chrome, и в Firefox событие click для специальных элементов, таких как input, button, textarea, которое находится в элементе summary, всплывает до родительского элемента details, Это нормальное поведение, однако интересно то, что событие click, по-видимому, игнорируется только в Chrome и не обрабатывается дальше, так что элемент details не переключается. Вы можете попробовать это с другим элементом, то есть button, в Chrome, и вы не увидите никакой разницы. Firefox, с другой стороны, просто переключает его независимо от типа элемента.

Таким образом, чтобы преодолеть эту проблему (с небольшой помощью CSS), вы можете попробовать его с призрачным checkbox элементом, так сказать, который абсолютно позиционирован и, таким образом, не является частью нормального потока документов. Он невидим и, что наиболее важно, управляет состоянием видимого флажка, оставаясь поверх него и обрабатывая в первую очередь событие click, например:

P.S. Работает как на Firefox, так и на Chrome - протестировано. 

  
$('input.ghost-checkbox').click(function(e) {
    $(this).next().prop('checked', !$(this).next().prop('checked'));
    return false;
});
 
.ghost-checkbox {
  opacity: 0;
  position: absolute;
  z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <span style="overflow: hidden">
      <input type="checkbox" class="ghost-checkbox">
      <input type="checkbox">
    </span>
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>
1 голос
/ 28 мая 2019

Эта проблема была исправлена ​​в Firefox 67.

См. https://bugzilla.mozilla.org/show_bug.cgi?id=1524893.

(https://bugzilla.mozilla.org/show_bug.cgi?id=1554691 и https://bugzilla.mozilla.org/show_bug.cgi?id=1539490) являются дубликатами выпуска.

1 голос
/ 19 мая 2019

Если я правильно понял, вам нужно скрыть детали, когда флажок установлен, чтобы вы могли использовать атрибут hidden. 

let bool = true;
const content = document.getElementById("content");
$('input').change(function(e) {
  bool = !bool;
  if (bool) {
    content.setAttribute("hidden", true);
  } else {
    content.removeAttribute("hidden");
  }
});
<details>
<summary>
  abrir aqui
  <input type="checkbox">
</summary>
<div hidden="true" id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
</div>
</details>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1 голос
/ 09 апреля 2019

Для достижения ожидаемого результата используйте нижеприведенные опции

  1. Удалить атрибут, открытый при снятии отметки с деталей
  2. Ограничить открытие по клику деталей 

$('input').change(function(e) {
if(!$("input").is(':checked')){   
  $('details').removeAttr('open');  
}
  e.stopPropagation();
  e.preventDefault();
  return false;
});



$('details').on('click', function(e) {
 if(!$("input").is(':checked')){
   if(e.target != this) return
       e.stopPropagation();
       e.preventDefault();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details id="mydetails">
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

Вариант 2: Использование show and hide of div 

$('input').change(function(e) {
if(!$("input").is(':checked')){   
  $('details').removeAttr('open');  
}
  e.stopPropagation();
  e.preventDefault();
  return false;
});



$('details').on('click', function(e) {
     if(!$("input").is(':checked')){
       $('div').hide();
       $('details').removeAttr('open');
     }else{
       $('div').show();
     }
       
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details id="mydetails">
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>
0 голосов
/ 20 мая 2019

Вы пробовали event.stopImmediatePropagation(), это остановит немедленное событие

0 голосов
/ 18 мая 2019

Попробуйте .triggerHandler() метод. Определите ваш обработчик событий для флажка, а затем используйте:

$(':checkbox').triggerHandler('click')

, чтобы изолировать событие нажатия от запуска чего-либо еще. У меня нет моего Mac, поэтому обратная связь приветствуется. 

$(':checkbox').click(function(e) {
  console.log($(this).is(':checked'));
});
$(':checkbox').triggerHandler('click')
details {
  width: 50%
}

summary * {
  display: inline-block;
  cursor: pointer
}

mark {
  float: right
}
<details>
  <summary>
    <input type="checkbox"><mark>TEST</mark>
  </summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit.
    Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor
    id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor
    nibh.
  </div>
</details>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...