Какой элемент _proper_ html использовать для вызова действия при нажатии на изображение?

Question

У меня есть веб-приложение, в котором (как и во многих других) вы нажимаете на изображение, чтобы что-то сделать, например, отметить запись, отправить письмо, пометить что-нибудь ...

Short,щелчок по изображению должен вызывать действие (с помощью javascript, но это не главное).

Мне было интересно, как «правильно» это сделать?

• <a> -tag?Хм ... на самом деле это не ссылка ...
• <button>?Потому что кнопка - это семантический элемент для вызова действия ...
• <div>?

Есть намеки?

Answer 1

Краткий ответ

Используйте <img> - не кнопку, не якорь или не ввод - как остальные предполагают, что элемент является интерактивным, даже без JavaScript .

Длинный ответ

нажатие на изображение должно вызывать действие (с помощью javascript, но это не главное).

Я не согласен;что - это точка:)

Поскольку при нажатии активируются только JS-функции, ваше изображение должно быть доступно только в среде JS.

Таким образом, правильный путьвставить его с помощью JavaScript;в то время как HTML-документ должен быть семантически правильным, структура DOM не обязательно должна быть семантически правильной, поэтому используемый вами элемент становится неактуальным.

Неправильный путь

<div>
    Click on the image to do something: <a href="javascript:wtv()" style="background-image:url(...)">&nbsp;</a>
</div>
<div>
    Click on the image to do something: <input type="image" onclick="wtv()" src="..." />
</div>
<div>
   Click on the image to do something: <img onclick="wtv()" src="..." />
</div>
<div>
    Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button>
</div>

Этовсе неправильно, потому что пользователь, у которого нет JavaScript, видит эти элементы и не может их использовать.

Из всех них я бы сказал, что <img> - меньшее зло, посколькупредложить интерактивный элемент.Самое большое зло при использовании <a> в качестве якоря - это гиперссылка на другой документ, и вы никогда не должны когда-либо использовать протокол javascript:.

Вы по-прежнему будете иметьта же проблема при внешнем добавлении обработчиков событий JavaScript:

/* external .js file */
document.getElementById("myButton").onclick = wtv;

<!-- HTML document -->
<div id="myButtonParent">
    Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)">&nbsp;</a>
</div>

Поскольку, опять же, у вас все еще есть (неработающая) гиперссылка, доступная для тех пользователей, у которых нет JavaScript.

Вместо

Вместо этого вставьте всю эту чертову штуку, используя сценарии DOM!Я собираюсь использовать <img> с событием onclick:

/* external .js file */
window.onload = function() {
    var img = document.createElement("img");
    img.src = "...";
    img.onclick = wtv;
    img.style.cursor = "pointer"; // so the mouse turns into a finger,
                                  // like on a hyperlink
                                  // Note: instead assign a class attribute and put this in an external CSS file...
    document.getElementById("myButtonParent").appendChild(img);
}

Answer 2

Вы можете добавить событие onclick для изображения:

<img id='image1' onclick="javascript:DoSomething()"...

или добавьте его через jquery:

$("#image1").click(
function() {
     DoSomething();
  });

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

Хотя div работает, он ничего семантически не добавляет на страницу. Вы не определяете отдельный фрагмент страницы, который вам нужен, чтобы сделать изображение кликабельным.

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

Answer 3

Не совсем понимаю, чего ты хочешь добиться.Но вы пробовали ввод изображений?

<input type="image" src="image source">

Это будет выполнять операцию, аналогичную отправке формы.