Форум

kichSman · #1 (**permalink**) 04.09.2011, 14:51

Уважаемые форумчане. Помогите с реализацией следующей цепочки событий.

Нужно определить нажатие курсора вне объекта (div) и его дочерних объектов (например select-а с его option). Пробовал разные варианты, в т.ч. и с присвоением булевой величины при hover над div. Но проблема возникла тогда, когда раскрывающийся список больше блока, а именно при выборе option - переменная просто не изменяется ("замораживается"), даже при выходе из поля дива.

Заранее признателен за любые варианты.

Андрей Параничев · #2 (**permalink**) 04.09.2011, 15:00

Option не является "полноценным" элементом. Его задание для браузера имеет информационный характер, для отрисовки dropdown меню select.

Поэтому option, как и список всех опций select, не генерирует события мыши и, соответственно, эти события не "всплывают".

Если вам нужно отловить изменение списка, попробуйте событие "change".
А вообще, без объяснения какая перед вами стоит конкретная задача, помочь будет сложно.

kichSman · #3 (**permalink**) 04.09.2011, 15:07

Сообщение от Андрей Параничев

Если вам нужно отловить изменение списка, попробуйте событие "change".
А вообще, без объяснения какая перед вами стоит конкретная задача, помочь будет сложно.

Событие change в моем случае не вариант, хотя при этом я и пытался повторно приравнивать переменную в true (т.е. что курсор остается над боксом) - всеравну не помогло.
Суть же моей реализации, что то на подобии всплывающего блока, которые содержит селекты, которые могут выходить за пределы блока.
И всеже, всеравно спасибо, за подсказку "Option не является "полноценным" элементом" - видимо именно в этом то и корень зла)).
Может помучиться через target в событии самого документа?

Magneto · #4 (**permalink**) 04.09.2011, 15:16

<html>
<head>
<style type="text/css">
*{
  margin:0;
  padding:0}
div{
  width:100px;
  height:30px;
  position:absolute;
  top:30%;
  left:30%;
  background:#1d1}
#wrapper{
  background:#d11;}
</style>
<script type="text/javascript">
window.onload = function () {

  var wrapper = document.getElementById('wrapper');

  document.addEventListener('mousedown', function () { alert('Вы кликнули вне дива') }, false);

  wrapper.addEventListener('mousedown', function (e) { e.stopPropagation() }, false);

}
</script>
</head>
<body>
  <div id="wrapper">
    <select>
      <option>пункт 1</option>
      <option>пункт 2</option>
      <option>пункт 3</option>
      <option>пункт 4</option>
      <option>пункт 5</option>
      <option>пункт 6</option>
    </select>
  </div>
</body>
</html>

kichSman · #5 (**permalink**) 04.09.2011, 16:18

Сообщение от Magneto

...

Просто супер, спасибо

Форум

Справочник

Discord чат

Курсы javascript