javascript - 如何在触摸屏智能手机上隐藏气球工具提示？

Question

我是 JavaScript 的新手。我使用搜索来找到我的问题的解决方案，但我找不到我要找的东西。

我正在使用这个 jquery.balloon.js，它将工具提示的默认浏览器呈现转换为自定义的呈现（添加一些 CSS - 背景、边框等）。

这是 JavaScript 代码：

$(document).ready(function(){
 $('a').balloon({ 
  position: "bottom",
  tipSize: "0"
 });
});

一切正常：当我将鼠标悬停在包含title属性的链接上时，工具提示显示为自定义。当我将鼠标悬停时，工具提示会隐藏。

在触摸屏设备上浏览时会出现问题。

没有鼠标悬停，所以我在链接上点击一次，气球工具提示出现（链接没有激活，只有当我点击两次时链接才会激活），但是工具提示没有隐藏。我点击了身体的某个地方，但工具提示仍保留在屏幕上。

我知道如何通过单击/点击外部元素（在htmlor中body）来隐藏 JavaScript 中的元素$('html').click(function() { //code });，但这里的问题是工具提示不是元素，而是属性......

如何通过点击身体某处仅隐藏工具提示？

您可以使用任何触摸屏设备在jquery.balloon.js站点上测试此行为，以查看一旦通过点击工具提示激活就无法隐藏。

score 0 · Accepted Answer

感谢您提供唯一的答案，但我想通了。

我class用以下代码创建了一个：

$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;

通过这种方式，我创建了.balloon允许我自己自定义工具提示的类。我使用此代码通过隐藏.balloon（隐藏新自定义的 jQuery 工具提示）来隐藏工具提示：

$(document).ready( function(){
    $('body').click( function(event){
        event.stopPropagation();
        $('.balloon').hide();
    });
});

score -1 · Accepted Answer

-1

您可以调用 hideBalloon 函数。

于 2014-03-23T21:02:20.420 回答

2 回答 2