Я пытаюсь добавить событие касания к элементу управления img на моей странице html5.Добавить touch event в html img control
Это то, что я до сих пор:
<img
src="Images/Home-icon.png"
onclick="Menu_Click('Home');"
ontouchend="Menu_Click('Home');"
draggable="false"
cssclass="iconImageStyle"
style="cursor: pointer;"
alternatetext="Home"
tooltip="Home"
height="32"
width="32" />
Событие щелчок от обычного веб-браузера работает должным образом. Но когда я пытаюсь получить к нему доступ из своего ipad, он не реагирует.
Помощь будет очень приветствуется.
Edit 1
Еще не везло до сих пор. Я попытался окружить img с помощью div и добавить событие touchhend в div, но он не отвечал на него.
Edit 2
Я последовал за учебник, который работает на моем IPad. В основном учебник представляет собой холст, который отображает координаты событий касания внутри холста. Я просто добавил холст и javascript на свою страницу и позволяю ему перекрывать некоторые из моих кнопок img. Моя страница реагирует на события касания, и холст отображает координаты должным образом. Теперь это то, где он становится странным. Кнопки, которые появляются внутри холста, теперь реагируют на событие касания, но фактически вызывают событие onclick! те же кнопки, которые не внутри холста не реагируют на что-нибудь ...
Это учебник код, который я вставил в моей странице
<script type="text/javascript">
var can, ctx, canX, canY, mouseIsDown = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
document.body.addEventListener("mouseup", mouseUp, false);
document.body.addEventListener("touchcancel", touchUp, false);
}
function mouseUp() {
mouseIsDown = 0;
mouseXY();
}
function touchUp() {
mouseIsDown = 0;
// no touch to track, so just show state
showPos();
}
function mouseDown() {
mouseIsDown = 1;
mouseXY();
}
function touchDown() {
mouseIsDown = 1;
touchXY();
}
function mouseXY(e) {
if (!e)
var e = event;
canX = e.pageX - can.offsetLeft;
canY = e.pageY - can.offsetTop;
showPos();
}
function touchXY(e) {
if (!e)
var e = event;
e.preventDefault();
canX = e.targetTouches[0].pageX - can.offsetLeft;
canY = e.targetTouches[0].pageY - can.offsetTop;
showPos();
}
function showPos() {
// large, centered, bright green text
ctx.font = "24pt Helvetica";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "rgb(64,255,64)";
var str = canX + ", " + canY;
if (mouseIsDown)
str += " down";
if (!mouseIsDown)
str += " up";
ctx.clearRect(0, 0, can.width, can.height);
// draw text at center, max length to fit on canvas
ctx.fillText(str, can.width/2, can.height/2, can.width - 10);
// plot cursor
ctx.fillStyle = "white";
ctx.fillRect(canX - 5, canY - 5, 10, 10);
}
</script>
<canvas id="can" height="200" width="300" style="background-color: black">
</canvas>
Я буду продолжать расследование. Но из того, что похоже, мне придется поместить холст за моими кнопками ... Я бы предпочел избежать этого, если это возможно, но до сих пор я не вижу никаких других решений. Если это сработает, я отправлю его в качестве решения, если кто-то, кто будет мудрее меня, не предложит что-то лучшее.
Редактировать 3
Я подтверждаю, что Javascript не является полезным. Просто наличие холста за img заставляет их отвечать на событие click. Я не знаю, почему это происходит, но я возьму его, пока не найду лучшее решение. Если кто-нибудь в качестве объяснения или лучшего решения, вы можете его опубликовать.