Форум

Urchin · #1 (**permalink**) 27.04.2012, 12:21

Всем доброго времени суток.
Есть ли возможность полностью удалить блок из слушателей событий мыши? Пример: Есть небольшой div (назовем его div1), над ним - большой div с абсолютным позиционированием (div2), который полностью перекрывает div1. Есть ли какая-нибудь возможность получать события от перекрытого div1.
Во flash к примеру есть два свойства (mouseEnabled и mouseChildren) благодаря которым можно исключить объект из слушателей мыши, интересует - есть ли что-то подобное в js.

Маэстро · #2 (**permalink**) 27.04.2012, 12:54

А что Вам мешает увеличить z-index первому DIV_у?

<html>
<body>
<script>
var div1 = document.createElement('DIV');
div1.style.cssText = 'position:absolute; left:50px; top:50px; width:200px; height:100px; background-color:#FF0000; z-index:1';
div1.innerHTML = 'внутренний';     
div1.onclick = function(){alert('внутренний')};      
document.body.appendChild(div1);

var div2 = document.createElement('DIV');
div2.style.cssText = 'position:absolute; left:10px; top:10px; width:400px; height:200px; border:1px solid #0000FF;';
div2.innerHTML = 'внешний';     
div2.onclick = function(){alert('внешний')};          
document.body.appendChild(div2);  
</script>
</body>
</html>

Urchin · #3 (**permalink**) 27.04.2012, 13:05

к сожалению нужно чтобы блок с абсолютным позиционированием находился именно над "внутренним" блоком div1, то есть у div2 z-index должен быть больше.

Маэстро · #4 (**permalink**) 27.04.2012, 13:18

Это тоже возможно, но механизм резко усложняется. Вам потребуется взять "на себя" всю обработку мыши в общем случае от всего document.
На примере onclick необходимо проверять координату мыши и сравнивать с местоположением и размерами прямоугольников. Причем положение прямоугольников надо вычислять в абсолютной системе координат относительно левого верхнего угла экрана. Если координата мыши попала в область внутреннего прямоугольника, то выполнить полезные действия. При пересечении (наложении) нескольких прямоугольников друг на друга должно быть еще какое-то условие, по которому отдается предпочтение, т.к. при такой схеме обработки все прямоугольники как бы абсолютно равные по значимости и z-index не влияет.
В Вашем частном случае Вы можете повесить обработчик мыши не на document, а на внешний DIV2 и проверять координаты клика - попали, ли они в область DIV1.

Urchin · #5 (**permalink**) 27.04.2012, 13:34

этот вариант у меня был, но очень хочется его избежать ). Блин неужели нельзя просто исключить объект из слушателей мыши. сколько бы проблем это решило...

Маэстро · #6 (**permalink**) 27.04.2012, 13:39

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

Блин неужели нельзя просто исключить объект из слушателей мыши. сколько бы проблем это решило...

"исключение объекта из слушателей мыши", т.е. запрет обработки событий от мыши на DIV2 делается легко. Только это ничего не даст, т.к. этот внешний DIV перекрывает внутренний. Скажите, какова необходимость такого перекрытия? Обычно это делают как раз для того, чтобы внутренний DIV НЕ ловил события от мыши. А у Вас для чего?

Urchin · #7 (**permalink**) 27.04.2012, 14:06

Сразу скажу что я флешер, возможно тогда мои извращенные действия станут понятными).
я избрал такое решение для неоднородной подсветки строки таблицы, при наведении на нее. То есть при наведении на строку, на нее сверху должен накладываться блок с бэкграунд имеджем, а при mouseout-е он должен исчезать. Проблема в том что после его наложения сразу же срабатывает mouseout (это и понятно), блок исчезает, затем сразу срабатывает mouseover, и т.д.
Да я знаю, что это все можно сделать изменив стиль этой строки, но хотелось попробовать флешевский подход ). да и вообще интересно почему нет возможности сделать объект "прозрачным" для событий мыши.
P.S. сразу скажу что повесить mouseout на внешний блок нет возможности ).

Маэстро · #8 (**permalink**) 27.04.2012, 14:27

Все-равно не понятно, зачем "блок с бэкграунд имеджем" накладывать сверху? Вы хотите полностью спрятать этим блоком содержимое строки таблицы? Если нет, то зачем накладывать, а не подкладывать (с помощью zIndex)?

Urchin · #9 (**permalink**) 27.04.2012, 14:30

эта картинка - грубо говоря фигурная рамка. а у таблицы есть свой бэкграунд

Раед · #10 (**permalink**) 27.04.2012, 16:14

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

интересно почему нет возможности сделать объект "прозрачным" для событий мыши

Потому, что это JavaScript, а не Flash.

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

эта картинка - грубо говоря фигурная рамка. а у таблицы есть свой бэкграунд

Можно создать одну картинку, на которой объеденены бэкграунд строки таблицы и ваша рамка, а потом просто менять СТИЛИ строки таблицы.

Если нет желания создавать допонительные картинки, то вы можете извлечь из стилей УРЛ бэкграунда и подставить его в стили дива. Затем УРЛ рамки поставить в бэкграунд строки таблицы, и в конце уже, как сказал Маэстро, просто подложить див под строку zIndex'ом

P.S. Urchin, не стоит переносить флешевские приёмы в JS. Не смотря на то, что они эмеют общую спецификацию, это разные языки

Форум

Справочник

Discord чат

Курсы javascript