Пропагандирование событий, предотвращающих стекирование элементов

Я создаю график, используя svg элементов. Я применяю к ним обработчики событий. События работают по желанию, но у меня проблема, потому что иногда один из элементов находится непосредственно поверх другого, поэтому, когда предполагается, что событие для элемента на дне должно быть запущено, это не так. Если вы посмотрите на изображение ниже, у меня есть rect с событием zoom. Масштабирование event срабатывает, когда mouse-wheel происходит на rect, но когда круг его покрывает, событие не запускается. Я должен иметь circles поверх rect, чтобы их можно было щелкнуть по мере необходимости. Как я могу обойти эту проблему. Я попытался найти решения здесь на SO, но не смог найти ничего конкретного в этой проблеме.Пропагандирование событий, предотвращающих стекирование элементов

У меня есть JSFiddle, который показывает круги. Если вы увеличите масштаб в любом месте, кроме кругов, поведение масштабирования будет запущено, но если вы попытаетесь увеличить масштаб кругов, поведение масштабирования не будет работать.

источник

2016-09-23 inspired

Можете ли вы связать мышь колеса событие для всей страницы, а затем проверить, если указатель мыши находится на границах «Rect»? – JuniorDev

Вы пробовали зарегистрироваться для увеличения кругов? –

нет У меня нет ... хм ... дайте мне посмотреть – inspired

Вы можете добавить

circle.selected { 
    pointer-events:none; 
}

и посмотреть, если это помогает.

ОБНОВЛЕНИЕ: Я только заметил, что отключение pointer-events не является опцией, исходящей от комментариев OP. В этом случае, проверяя, является ли событие на выбранном круге событием масштабирования в режиме мыши, и если да, то добавление класса css disable-zoom к выбранному кругу может работать с css для класса .disable-zoom с директивой pointer-events:none;.

источник

2016-09-26 16:49:34 phreakv6

OP уже сказал, что указатели-события ни одна из них не является опцией, они должны быть событиями на круге –

Тогда как будет происходить событие масштабирования на 'rect'? – inspired

См. Эту скрипку. https://jsfiddle.net/m2zbL32j/3/ – phreakv6

Я не уверен, что это помогает ли вам в контексте d3js, но ...

С нормальным JS вы можете просто поймать событие колеса в ваших кругах и просто вызвать обработчик события Прямоугольника.

Демонстрация: (попробуйте щелкнуть мышью и зациклить мышью по фигурам).

$("rect").on('wheel', rectWheel); 
 
$("circle").on('wheel', circleWheel); 
 
$("circle").on('click', circleClick); 
 

 
function rectWheel(evt) { 
 
    out("rect zoom"); 
 
} 
 

 
function circleWheel(evt) { 
 
    rectWheel(evt); 
 
} 
 

 
function circleClick(evt) { 
 
    out("circle click"); 
 
} 
 

 
function out(text) { 
 
    var $out = $("#out"); 
 
    $out.text($out.text() + text + '\n'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <rect id="back" width="150" height="150" fill="red"/> 
 
    <circle id="front" cx="100" cy="100" r="20" fill="green"/> 
 
</svg> 
 

 
<pre id="out"> 
 
</pre>

источник

2016-09-26 18:11:28

Пропагандирование событий, предотвращающих стекирование элементов

ответ

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