我目前在使用 IE11 及更低版本时遇到一些问题。
我有一个标签,看起来像这样:
<div class="cursor_pointer" data-href="/de/S/palettieren_umreifen/paletten/Paletten.html">
<img title="Paletten" alt="Paletten" src="/medias/sys_master/had/h00/8854080749598/8802146943006_SB50-D_1696_psd.png" />
</div>
这是我的 JavaScript:
sethrefs = function () {
if (document.querySelectorAll) {
var datahrefs = document.querySelectorAll('[data-href]'),
dhcount = datahrefs.length;
while (dhcount-- > 0) {
var ele = datahrefs[dhcount],
link = function (event) {
var target = event.target,
leftclicked = ('buttons' in event && event.buttons === 1) ? true :
('which' in event && event.which === 1) ? true :
(event.button === 1) ? true : false;
if (!event.target.href) window.location.href = this.getAttribute('data-href');
};
if(ele.addEventListener) ele.addEventListener('click', link, false);
else ele.attachEvent('onclick', link);
}
}
};
sethrefs();
我想要的是,如果您单击图像,您就可以访问该网站。在其他所有浏览器上都可以正常工作,但在 IE 11 及更低版本中则不然。是因为他无法处理 data-href 调用吗?
我只是尝试给它一些 z-index 但没有任何效果。
最佳答案
您的data-href
属性是自定义 data-* 属性。如果它能在其他浏览器上按照您希望的方式工作(我自己也不知道),那就太好了,但是数据属性用于应用一些数据并触发 JS 事件您的 HTML 元素。
请参阅CanIUse为了兼容性
你可以使用经典的<a href="your/link.html"></a>
或者使用 JS dataset API :
var dataLinks = document.querySelectorAll('.cursor_pointer');
dataLinks.forEach(function (link) {
link.onclick = function() {
window.location.href = link.dataset.href;
}
});
编辑:
(跟随我的答案评论中的对话)
将 data-href 放入您想要的任何元素。使用 data-href
选择元素属性并将函数应用于它们。您需要填充 NodeList.prototype.forEach
( document.querySelectorAll
返回 NodeList
,而 IE/Edge 实际上不支持 forEach
)。
<!-- both div and img have the data-href attribute -->
<div class="cursor_pointer" data-href="/de/S/palettieren_umreifen/paletten/Paletten.html">
<img data-href="/de/S/palettieren_umreifen/paletten/Paletten.html" title="Paletten" alt="Paletten" src="/medias/sys_master/had/h00/8854080749598/8802146943006_SB50-D_1696_psd.png" />
</div>
然后是 JS:
// NodeList.forEach isn't supported by MS browsers
if (!NodeList.prototype.forEach) {
Object.defineProperty(NodeList.prototype, "forEach", {
value: Array.prototype.forEach,
enumerable: true,
configurable: true,
writable: true
});
}
var dataLinks = document.querySelectorAll('[data-href]');
dataLinks.forEach(function (link) {
link.onclick = function() {
window.location.href = link.dataset.href;
}
});
关于html - 使 <img> 在 <div> 标签内可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46408022/