点击HTML图像时移除蓝色高亮

Question

我正在制作一个定制的Android应用程序。我正在显示一个包含在div中的img标记的html页面。

<div class="press">
    <img src="but.png" width="150" height="62" border="0"/>
</div>

我所编写的JavaScript代码:

$(".press").bind("click",function()    
{
//display something
});

当我点击图片时，点击有效，但图片周围会出现蓝色覆盖层。

图像1

图像2被单击后

我不知道如何移除它。我尝试了很多方法，但没有一个能解决。请帮忙。谢谢。

- Vinraj

---

可能是重复问题：如何防止默认的蓝色选择效果。 - Ryan Lynch

嘿，Ryan...那篇帖子中的解决方案对我没有用... - Vinraj

Answer 1

您可以通过CSS防止页面上的选择。 您可以将*选择器更改为要防止选择的元素选择器。

/*IE9*/
*::selection 
{
    background-color:transparent;
} 
*::-moz-selection
{
    background-color:transparent;
}
*
{        
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    /*IE10*/
    -ms-user-select: none;
    user-select: none;

    /*You just need this if you are only concerned with android and not desktop browsers.*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}    
input[type="text"], textarea, [contenteditable]
{

    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

- Parthik Gosar

---

你能为此创建一个 JSFiddle 吗？ - Parthik Gosar

“-webkit-tap-highlight-color” 正是我要找的！非常感谢！！ - pmrotule

Answer 2

尝试这个：

CSS

.press, img, .press:focus, img:focus{
    outline: 0 !important;
    border:0 none !important;
}

- Rohan Kumar

---

现在尝试一下我所做的更改。 - Rohan Kumar

我还是得到了同样的错误，Rohan。我实际上正在使用 Android 平台开发增强现实应用程序，该应用程序在相机顶部显示浏览器。 - Vinraj

嗨Rohan，感谢您的支持，但错误仍然存在，我在图像周围得到了一个新的黑色背景。 - Vinraj

Answer 3

您可以使用CSS：

**HTML**

<button class="press">
    <img src="but.png" width="150" height="62" border="0"/>
</button>

** CSS **

.press{
    outline-width: 0;
}

.press:focus{
    outline: none;
}

以下是答案来源：如何去除输入文本元素的边框高亮

- Sacha Nacar

Answer 4

可能是包含按钮的 div 上的背景颜色或边框颜色。否则，使用以下代码完全删除点击后的 CSS。

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

- Ayush