츄이 Chorkie :
나는 버튼을 클릭하면 이동하는 스타일이있다. 버튼을 해제 마우스 커서 위치에 있지 않을 경우, 클릭 기능은 트리거되지 않습니다. 예상대로 어떻게 여전히 클릭 기능 트리거를 만들 수 있습니까?
다음은 HTML, CSS 및 JavaScript와 바이올린입니다. 공지 사항 버튼은 마우스 포인터 아래에 존재하지 않는 장소에서 클릭하고 릴리스를 유지하면 함수를 트리거하지 않습니다. https://jsfiddle.net/du1eL8gc/1/
그냥 참고 : 나는, 그냥 사용자가 기대하는 것처럼 작동해야 할 버튼이 실제로 장소 밖으로 이동하기 때문에이 트리거되지 않습니다 의미가 있음을 알고있다.
HTML :
<div class="buttons-dialog" style="position:absolute; bottom:20px; left:33%">
<a class="button" id="saveButton">Save</a>
</div>
CSS :
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');
:root {
--blueColor: #0028aa;
--darkBlueColor: #022693;
--errorColor: rgb(255, 130, 0);
--grayColor: #bcbdaa;
--darkgrayColor: #525252;
--cyanColor: #59ffff;
--yellowColor: #fffa51;
--emeraldColor: #184343;
--lightEmeraldColor: #38a6a6;
--redColor: #9c0b07;
--badTextColor: #fe6666;
--highlightTextColor: #ffffff;
--fontName: 'IBM Plex Mono', monospaced;
font-family: var(--fontName);
font-size: 16px;
}
body {
background: var(--blueColor);
}
.button-panel {
margin-bottom: 1.5em;
}
.button {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
box-shadow: 10px 8px 0 black;
text-decoration: none;
}
.buttonNoShadow {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
text-decoration: none;
}
.button:active {
color: var(--highlightColor);
position: relative;
left: 10px;
top: 8px;
box-shadow: none;
}
.button::before {
content: "▯ ";
color: var(--highlightColor);
}
.button::after {
content: " ▯";
color: var(--highlightColor);
}
자바 스크립트 :
document.getElementById("saveButton").addEventListener("click", function () {
console.log('clicked')
});
에드 루카스 :
당신은 "mouseup에"이벤트와 자바 스크립트를 사용하고이 버튼의 컨텐츠를 포장하고 버튼 대신에 콘텐츠를 이동하여 작업 할 수 있습니다.
근무 예 : https://jsfiddle.net/8a5upveg/3/
예를 들어 당신은 텍스트를 포장 할 수 있습니다 <span>
:
<a class="button" id="saveButton"><span>Save</span></a>
그런 다음를 대상으로하여 CSS를 변경 <span>
:
.button {
// Seems necessary to catch top pixel of button click
padding: 1px;
}
.button span {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
box-shadow: 10px 8px 0 black;
text-decoration: none;
}
.buttonNoShadow span {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
text-decoration: none;
}
.button:active span {
color: var(--highlightColor);
position: relative;
left: 10px;
top: 8px;
box-shadow: none;
}
.button span::before {
content: "▯ ";
color: var(--highlightColor);
}
.button span::after {
content: " ▯";
color: var(--highlightColor);
}