Если обработчик клика запускается при нажатии на полосу прокрутки

Взгляните на эти фрагменты HTML: Jsfiddle

<style>
  div { 
    margin:20px; 
    border: 30px red solid; 
    padding: 20px; 
    background-color:green;
    overflow-y:scroll; 
  }
</style>

<div onclick="alert('div clicked');">click me</div>

Теперь, если пользователь нажимает на полосу прокрутки в Firefox или Chrome, обработчик кликов на элементе div не срабатывает. С другой стороны, в IE срабатывает обработчик кликов.

Какое поведение верно? Является ли ожидаемое поведение определенным в любом месте?

ОТВЕТЫ

Ответ 1

рекомендации w3 предполагают, что полоса прокрутки должна быть размещена между внутренним краем границы и краем внешнего края элемента. Кроме того, размеры прокрутки должны быть вычтены из ваших размеров элемента.

Короче говоря, полоса прокрутки не должна находиться внутри элемента. и высота/ширина элемента должны быть соответствующим образом отрегулированы.

Ответ 2

Я думаю, что оба поведения в порядке. Когда полоса прокрутки находится над документом (например, сафари), она должна запускать событие щелчка, в то время как полоса прокрутки не должна. (хром, firefox).

Я рекомендую "не возиться (пытаясь справиться с этим поведением) с помощью щелчка на полосе прокрутки, но в случае прокрутки или щелчка, если это на документе или нет.

Я уверен, что с мобильными браузерами это будет большой рассказ, если вы попытаетесь "угадать", что произойдет.

Ответ 3

Если мыслить буквально, полоса прокрутки на самом деле не является частью страницы, а является способом навигации по этой странице, поэтому не должно иметь прямого вмешательства со своей страницей, если только кто-то не использует эффект onscroll. Если полоса прокрутки покрывает часть элемента, тогда эфир будет широким, или браузер не будет компенсировать добавленную ширину полосы прокрутки. Я думаю, что в этом случае Firefox и Chrome являются "правильными", но IE не обязательно ошибочен, у них просто есть другой способ реализации прокрутки.

Я думаю, еще один вопрос: "отображает ли браузер часть элемента за полосой прокрутки, если ширина страницы составляет 100%?" Если это так, элементы должны быть доступны через панель.

Надеюсь, это имеет смысл:)

Ответ 4

В соответствии с W3, события события пузырятся.

Что это значит? Здесь объясняется:

Пузырящийся    Процесс, посредством которого событие распространяется вверх через своих предков после обработки его целью.

Теперь проблема, касающаяся полос прокрутки, заключается в том, чтобы понять, должны ли они:

  • остановить распространение события клика или
  • пусть это пузырится до более подходящего обработчика (в данном случае это div элемент) или
  • ответьте на событие И также выпустите его, чтобы предков, чтобы поймать его.

Теперь, в той же странице W3 объясняется, что такое событие прокрутки:

прокрутки    Событие прокрутки происходит, когда прокручивается вид документа.

Теперь то, что вы ожидаете от полосы прокрутки, будет обрабатывать прокрутку вида документа (в данном случае div), не мешая ему правильное и ожидаемое поведение (включая распространение событий).

Реальная проблема здесь заключалась в том, что, когда свиток на мышах все еще был воображением, чтобы прокрутить, вам нужно было щелкнуть первым! Таким образом, в этом качестве мы можем сказать, что поведение № 1 и номер 3 являются правильными (первый приоритет для полосы прокрутки, а второй - как полоса прокрутки, так и предки).

Все это можно сказать: на данный момент на нем нет явного стандарта. Создатели браузера могут решить принять одно поведение или другое, и оба они верны.

Что вы можете сделать в этом случае, чтобы получить однородное поведение в браузерах, может быть, например, поймать клики на полосах прокрутки (для Firefox и Chrome) и запускать событие с щелчком мыши.

Ответ 5

Здесь существует большая проблема, которая распространяется во всей разработке webapp: на самом деле нет стандарта; просто рекомендации. W3C - самый громкий голос, когда речь идет об объединении Интернета, но все, что они могут дать, - это рекомендации, поскольку Microsoft и разработчики небольших веб-браузеров не входят в состав комитета.

Итак, короткий ответ: ни правильный, ни неправильный из-за отсутствия стандартного стандарта

Долгое решение Microsoft давно приняло решение, противоречащее Netscape (единственному другому браузеру того времени), которое противоречит тому, что сейчас делают другие браузеры, которые относятся к вашему вопросу:

Microsoft решила, что все элементы, относящиеся к элементу, будут включены/отрисованы внутри ограничивающего блока элемента (включая границы, отступы, поля (?), полосы прокрутки и т.д.). Это означает, что любое нажатие внутри элемента вызывает событие onclick независимо от того, что было нажато, потому что оно находится в ограничивающей рамке.

Где W3C рекомендует включать только область заполнения и отображения, оставляя границы, поля, полосы прокрутки и т.д., которые будут отображаться вне нее, что, в свою очередь, означает, что единственный раз, когда onclick поднят, - это когда область заполнения и/или отображения элемент щелкнут