我正在使用 Bootstrap Popovers 在我的 UI 中提供“帮助文本”。
我现有的 JavaScript:
// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'hover',
placement: 'auto bottom'
});
当我用鼠标悬停或触摸元素时,Popover 会显示。我的问题是 anchor 标记元素。如果 Popover 由触摸事件触发:
- 不要点击链接
- 将 anchor 标记元素添加到 Popover 文本以提供对底层链接的访问
最佳答案
我会检测用户是否在触摸设备上,然后根据数据属性提供不同的内容。使用 Popover 方法触发您的各种操作。
<a href="#"
data-href="http://jsfiddle.net"
data-toggle="popover"
title="A popover title"
data-hover-content="No link here."
data-touch-content="<a href='http://jsfiddle.net'>
A link here</a>.">A popover link
</a>
var is_touch_device = 'ontouchstart' in document.documentElement;
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'manual',
placement: 'auto bottom',
html: true,
content: function () {
if (is_touch_device) {
return $(this).attr('data-touch-content');
} else {
return $(this).attr('data-hover-content');
}
}
})
.on('mouseenter touch', function (e) {
$(this).popover('show');
})
.on('mouseleave', function () {
$(this).popover('hide');
})
.on('click', function () {
if (!is_touch_device) {
window.location.href = $(this).attr('data-href');
}
});
这或许可以简化一点。当然,您可以改为在内容函数中指定您的内容。
关于javascript - 触摸和点击的不同行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31188612/