У меня есть кнопка для перемещения при нажатии. Если кнопка не находится в положении с курсором мыши при отпускании, функция щелчка не срабатывает. Как я могу сделать триггер функции щелчка, как ожидалось?
Вот скрипка с 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);
}
JavaScript:
document.getElementById("saveButton").addEventListener("click", function () {
console.log('clicked')
});