单击时移动的按钮的 JavaScript addEventListener "click"

Question

我有一个按钮的样式，可以在单击时移动。如果释放时按钮不在鼠标光标所在的位置，则不会触发点击功能。我怎样才能让点击功能按预期触发？

这是一个 HTML、CSS 和 JavaScript 的 fiddle 。请注意，如果您在鼠标指针下不存在按钮的地方按住单击并释放，则不会触发该功能。 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')
});

Answer 1

您可以将 JavaScript 与“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);
  }