<div class='long-click'>0.3s Long-Click</div>
<p>버튼을 꾹~ 눌러보세요!</p>
/* Press Effect */
.long-click:active::after {
width: 100%;
}
.long-click:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #659cf4;
transition: width 0.29s;
user-select: none;
pointer-events: none;
}
/* ---------------- */
.long-click {
width: 340px;
height: 60px;
font-size: 22px;
position: relative;
background: #febf00;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Pretendard;
word-break: break-all;
outline: none;
}
p {
margin-top: 16px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: #f7f8fc;
}
const onlongclick = ($target, duration, callback) => {
$target.onmousedown = () => {
const timer = setTimeout(callback, duration);
$target.onmouseup = () => {
clearTimeout(timer);
};
};
}
// 코드예시
const $target = document.querySelector('.long-click');
onlongclick($target, 300, () => {
alert('Long Click');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.