移动端html5模拟长按事件的实现方法

2020-04-21 07:05:23易采站长站整理

margin-top: 50px;
}

.label {
display: inline-block;
box-sizing: border-box;
width: 105px;
height: 32px;
line-height: 32px;
background-color: #F2F2F2;
color: #5F5F5F;
text-align: center;
border-radius: 3px;
font-size: 14px;
}

.label.selected {
background-color: #4180cc;
color: white;
}

.delete_btn {
display: none;
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) translateY(-100%);
color: white;
padding: 10px 16px;
background-color: rgba(0, 0, 0, .7);
border-radius: 6px;
line-height: 1;
white-space: nowrap;
font-size: 12px;
}

.delete_btn::after {
content: '';
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, .7) transparent transparent transparent;
position: absolute;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
}

ps: touchstart和touchend只有在移动端设备上才有用,如果要看代码示例的话请:

用chrome
F12打开调时窗
切换到模拟移动设备

即点击如下图: