双击时防止在Chrome中突出显示文本
在Chrome中，当我在以下示例中点击SVG几次时，底部的文本将突出显示。不过在Firefox中并没有做到这一点。
是否有防止这种情况发生的方法？我是否可以添加一些代码来阻止这种情况的发生，或者这可能是bug或Chrome中的某些东西？
产品： https://jsfiddle.net/xeqtcp5k/77/
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000000;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrape {
position: relative;
width: 266px;
height: 174px;
overflow: hidden;
background: #000000;
border-radius: 25px;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
margin: 0;
padding: 0;
float: left;
}
.wrape .nav li a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: #000000;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape .nav li:nth-of-type(n+11) a {
margin: 0 4px 0 0;
}
.wrape .nav li:nth-of-type(5n) a {
margin-right: 0;
}
.wrape .nav li:nth-of-type(8) a {
opacity: 0;
border: none;
background: none;
}
.wrape .nav li:nth-of-type(1) a {
border-top-left-radius: 25px;
}
.wrape .nav li:nth-of-type(5) a {
border-top-right-radius: 25px;
}
.link {
fill: #0059dd;
}
.wrape .nav li:nth-of-type(11) a {
border-bottom-left-radius: 25px;
}
.wrape .nav li:nth-of-type(15) a {
border-bottom-right-radius: 25px;
}
.btn {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
background: #000000;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 6px;
bottom: 0;
right: 0;
fill: #0059dd;
margin: auto;
}
.btn .pause {
left: 0;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: #0059dd;
font-family: "Times New Roman", Times, serif;
}
.info {
display: table-cell;
white-space: nowrap;
vertical-align: middle;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: #000000;
color: #0059dd;
}
.sent {
font-size: 22px;
background: black;
color: #0059dd;
cursor: pointer;
font-family: "Times New Roman", Times, serif;
}
.input:focus {
outline: none;
}
.sent:focus {
outline: none;
}
.wrap p{
display: table;
margin: 22px auto 0;
background: green;
width: 300px;
/*height: 100%; remove*/
border: 1px solid red;
font-weight: 900;
font-style: normal;
font-size: 22px;
font-family: "Times New Roman", Times, serif;
padding: 5px;
color: #0059dd;
}<div class='outer'>
<div class='tcell'>
<audio autoplay id="player"></audio>
<div class="wrape">
<ul class="nav">
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li><a> Audio Player</a></li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
</ul>
<div id="button" class="btn">
<svg class="play " height="40" viewbox="0 0 85 100" width="38">
<title>Play</title>
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
</path>
</svg>
<svg class="pause " height="40" viewbox="0 0 60 100" width="36">
<title>Pause</title>
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
</path>
</svg>
</div>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="someValueHere" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
<div class="wrap">
<p>
Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
</p>
</div>
</div>
</div>
2 个答案:
答案 0 :(得分：2)
一个选项是中断对象上的双击事件，它不会干扰单击：
（jsfiddle）
document.getElementById('button').addEventListener('mousedown', function (event) {
if (event.detail > 1) {
event.preventDefault();
}
}, false);
答案 1 :(得分：1)
您可以使用包装器div并将用户选择设置为none，这将阻止文本突出显示。
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000000;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.noSel {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.wrape {
position: relative;
width: 266px;
height: 174px;
overflow: hidden;
background: #000000;
border-radius: 25px;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
margin: 0;
padding: 0;
float: left;
}
.wrape .nav li a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: #000000;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape .nav li:nth-of-type(n+11) a {
margin: 0 4px 0 0;
}
.wrape .nav li:nth-of-type(5n) a {
margin-right: 0;
}
.wrape .nav li:nth-of-type(8) a {
opacity: 0;
border: none;
background: none;
}
.wrape .nav li:nth-of-type(1) a {
border-top-left-radius: 25px;
}
.wrape .nav li:nth-of-type(5) a {
border-top-right-radius: 25px;
}
.link {
fill: #0059dd;
}
.wrape .nav li:nth-of-type(11) a {
border-bottom-left-radius: 25px;
}
.wrape .nav li:nth-of-type(15) a {
border-bottom-right-radius: 25px;
}
.btn {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
background: #000000;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 6px;
bottom: 0;
right: 0;
fill: #0059dd;
margin: auto;
}
.btn .pause {
left: 0;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: #0059dd;
font-family: "Times New Roman", Times, serif;
}
.info {
display: table-cell;
white-space: nowrap;
vertical-align: middle;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: #000000;
color: #0059dd;
}
.sent {
font-size: 22px;
background: black;
color: #0059dd;
cursor: pointer;
font-family: "Times New Roman", Times, serif;
}
.input:focus {
outline: none;
}
.sent:focus {
outline: none;
}
.wrap p {
display: table;
margin: 22px auto 0;
background: green;
width: 300px;
/*height: 100%; remove*/
border: 1px solid red;
font-weight: 900;
font-style: normal;
font-size: 22px;
font-family: "Times New Roman", Times, serif;
padding: 5px;
color: #0059dd;
}<div class='outer'>
<div class='tcell'>
<audio autoplay id="player"></audio>
<div class='noSel'>
<div class="wrape">
<ul class="nav">
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li><a> Audio Player</a></li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
<li>
<a href="" target="_blank">
<svg class="link" width="44" height="44" viewbox="-6 -6 35 35">
<path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/>
</svg>
</a>
</li>
</ul>
<div id="button" class="btn">
<svg class="play " height="40" viewbox="0 0 85 100" width="38">
<title>Play</title>
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
</path>
</svg>
<svg class="pause " height="40" viewbox="0 0 60 100" width="36">
<title>Pause</title>
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
</path>
</svg>
</div>
</div>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="someValueHere" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
<div class="wrap">
<p>
Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
</p>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？