时间戳

首页 > 解决方案 > Button 上的 MouseDown 使其隐藏，MouseUp 使其可见

javascript - Button 上的 MouseDown 使其隐藏，MouseUp 使其可见

问题描述

我在页面上有一个按钮：

<input id="PauseMe" type="image" src="pauseButton.png">

我想为 MouseUp 和 MouseDown 的按钮添加两个函数，这将导致按钮在 MouseDown 事件发生时变为“不可见”，并在 MouseUp 事件发生时返回“可见”。

我已经按照另一个stackoverflow添加：

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};

然后我使用以下代码调用它：

$( "#PauseMe" ).mousedown(function() {
    $('#PauseMe').invisible();
});
$( "#PauseMe" ).mouseup(function() {
    $('#PauseMe').visible();
});

不幸的是，一旦触发 mousedown 事件，我似乎无法触发 mouseup 事件。

对于上下文，我有一个按钮所在的背景图像，当鼠标下降并使按钮不可见时，按钮现在看起来是背景图像的一部分，而当鼠标上升时它看起来很正常。我已经在另一个站点上看到了这个工作，但是除了直接添加和删除类到按钮而不是直接添加 CSS 属性之外，我无法很好地查看他们的源代码以了解他们是如何管理它的。

标签： javascripthtmljquerycss

解决方案

使用 CSS:active伪选择器

#PauseMe:active {
  visibility: hidden;
}
<input id="PauseMe" type="image" src="//placehold.it/50x50/0bf">

:active似乎是一个更好的解决方案，因为动作元素可以在选项卡上变为活动状态（通常不仅在单击或鼠标事件上）。

显示和可见性问题：

Tl;博士：使用opacity。

如果元素得到display: none或，则元素将阻止您注册 mouseup 事件（也适用于 Click 事件中的 mouseup） visibility: hidden。

为了达到同样的效果，但保持事件冒泡 -使用 CSSopacity代替：

jQuery.fn.visible = function() {
  return this.css('opacity', '1');
};
jQuery.fn.invisible = function() {
  return this.css('opacity', '0');
};

$("#PauseMe").on({
  mousedown() {
    $(this).invisible();
  },
  mouseup() {
   $(this).visible();
  }
});
<input id="PauseMe" type="image" src="//placehold.it/50x50/0bf">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

推荐阅读