触摸和点击的不同行为

Question

我正在使用 Bootstrap Popovers 在我的 UI 中提供“帮助文本”。

我现有的 JavaScript：

// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'hover',
    placement: 'auto bottom'
});

当我用鼠标悬停或触摸元素时会显示弹出框。我的问题是锚标签元素。如果 Popover 由 触摸事件 触发：

1. 不要点击链接
2. 向 Popover 文本添加锚标记元素以提供对基础链接的访问权限

Answer 1

我会检测用户是否在触摸设备上，然后根据数据属性提供不同的内容。使用 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');
    }
});

Fiddle demo

这可能可以简化一点。当然，您可以在 content 函数中指定您的内容。

Answer 2

这可能会有所帮助：

event.preventDefault()

“说明：如果调用此方法，则不会触发事件的默认动作……例如点击锚点不会将浏览器带到新的URL……”