Щелчок по флажку в ссылке приводит к ссылке на следующую - как я могу избежать этого?

У меня есть checkbox insde link. Во всех браузерах, кроме Chrome, при нажатии на этот флажок вы следуете ссылке (вместо того, чтобы устанавливать флажок).

Как избежать такого поведения?

Демо (наведите указатель мыши на одно из изображений продукта, чтобы увидеть этот флажок):

И вот этот код:

<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" target="_blank"> <span>New</span> <div> <h3>Crew Neck Jumper</h3> <p><span>Available</span></p> <span>/</span> <p><span>$2,390.00</span></p> <p> <label for="comparator_item_25">Select to compare</label></p> </div>
</a>
3 ответа

Это неверный HTML (см. Отчет). Чтобы избежать этого, достаточно просто включить только текст или изображения внутри тега привязки и перенести флажок вне. Вы можете использовать некоторый jQuery, чтобы добавить событие щелчка в поле, которое переместится на следующую страницу.


Если вы хотите, чтобы вы не хотели перемещать его за пределы вам нужно было бы иметь onclick="return false;" и добавьте слушателя с jQuery, который переключает его при нажатии. Я не уверен, что это будет работать во всех браузерах, и ваш лучший вариант - просто сделать это стандартно.


Я думаю, что это происходит потому, что Div (элемент блока) находится внутри тега A (встроенный элемент), и по умолчанию событие будет пузыриться в ближайшее время, когда вы установите флажок.

Даже если HTML 5 сделал исключение для тега A и теперь позволяет вставить элемент блока в этот встроенный элемент. Чтобы заставить работать тот же самый браузер, вам придется подождать, чтобы все они поддерживали функции html 5

1) попробуйте с другим doctype 2) построить div вне A, ссылка не обязательна для выполнения

licensed under cc by-sa 3.0 with attribution.