我需要为图像添加注释标记,当用户单击每个注释时需要为图像显示相应的注释消息。
在移动版(IOS和Android)和桌面版的Chrome浏览器中都可以正常工作,但在移动版和桌面版的Safari和Firefox浏览器中却无法正常运行。
脚本
$('.announation').each(function(i) {
$('.announation').eq(i).on('click touchstart', function(e) {
$(
'.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.ele'
).eq(i).css({
top: 0,
left: document.getElementById(e.srcElement.id).offsetLeft - 380
}).show();
document.getElementById(e.srcElement.id).innerText = "x";
$('#' + e.srcElement.id).addClass("active");
});
});
HTML:
<div class="annotationsmark">
<div class="announation" alt="one" id="oneA">+</div>
<div class="announation" alt="two" id="twoA">+</div>
</div>
<div id="messages">
<div class="one">One</div>
<div class="two">two</div>
</div>
我尝试了多种方法:
没用:
$(document.body).on( "click touchstart", ".announation", function() { });
没用:
$('body .announation').eq(i).on('click touchstart', function(e){});
没用:
$('.annotationsmark').on('click', '.announation', function(e) {
var i=$(this).index();
});
最佳答案
问题可能是由于srcElement
引起的。Firefox和Safari可能不支持此功能。
尝试将srcElement
替换为target
并将e.srcElement.id
替换为e.target.id
或者,您可以创建一个变量并使用该变量
var target = event.target || event.srcElement;