Question

我有一个带有3d按钮的网站。但它们不能点击顶部或更好的css转换工作，但＆＃34; onclick＆＃34; -event没有激活...它只是在按钮停止的区域中工作不再那里..

＆＃13;

function foo() {
  console.log('foo() called');
}

＆＃13;

/** CSS **/

.clicky {
    /** Offset the Position **/
    position: relative;
    top: 0;
    margin-top: 0;
    margin-bottom: 10px;

    /** 3D Block Effect **/
    box-shadow: 0 10px 0 0 #6B2A4A;

    /** Make it look pretty **/
    display: block;
    background: #a47;
    color: #eee;
    padding: 1em 2em;
    border: 0;
    cursor: pointer;
    font-size: 1.2em;
    opacity: 0.9;
    border-radius: 10px;
}

.clicky:active {
    /** Remove 3D Block Effect on Click **/
    box-shadow: none;
    top: 10px;
    margin-bottom: 0;
}

.clicky:hover {
    opacity: 1;
}

.clicky:active,
.clicky:focus {
    /** Remove Chrome's Ugly Yellow Outline **/
    outline: 0;
}

＆＃13;

<button class="clicky" onclick="foo();">CLICK ME!</button>

＆＃13;

当用户点击顶部的3D按钮时，是否有可能触发＆＃34; onclick＆＃34; -event？

如果有人可以帮助我，那就太好了，谢谢！

Answer 1

这是因为通过向下移动按钮的位置10px（top:10px css类中的:active），您将其移出鼠标。如果释放鼠标而不移回按钮的命中框，则鼠标事件（在这种情况下为mouseup）将在鼠标下方的任何内容上触发，而不是按钮上的click事件。

你可以做的是为按钮创建一个容器，比如<div>，并在其上放置事件处理程序。请注意，事件必须为mouseup，因为在这种情况下，任何元素都不会触发click。

<div onmouseup="foo()">
  <button class="clicky">CLICK ME!</button>
</div>

演示，请注意我已将.clicky:active类更改为.click:active, div.active .clicky以使其更改为点击阴影也会导致css更改

＆＃13;

function foo(){
	alert('foo called');
}

＆＃13;

div {
  padding-bottom:10px;
  display:inline-block;
}
.clicky {
    /** Offset the Position **/
    position: relative;
    top: 0;
    margin-top: 0;
    margin-bottom: 10px;

    /** 3D Block Effect **/
    box-shadow: 0 10px 0 0 #6B2A4A;

    /** Make it look pretty **/
    display: block;
    background: #a47;
    color: #eee;
    padding: 1em 2em;
    border: 0;
    cursor: pointer;
    font-size: 1.2em;
    opacity: 0.9;
    border-radius: 10px;
}

.clicky:active, div:active .clicky {
    /** Remove 3D Block Effect on Click **/
    box-shadow: none;
    top: 10px;
    margin-bottom: 0;
}

.clicky:hover {
    opacity: 1;
}

.clicky:active,
.clicky:focus {
    /** Remove Chrome's Ugly Yellow Outline **/
    outline: 0;
}

＆＃13;

<div onmouseup="foo()">
  <button class="clicky">CLICK ME!</button>
</div>

＆＃13;

Answer 2

在你的风格中添加这个类。然后顶部的单击将按下按钮

.clicky:active:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    top: -10px;
    left: 0;
    z-index: 1;
}

请参阅代码段

function foo() {
  alert('Clicked');
}

.clicky {
  /** Offset the Position **/
  position: relative;
  top: 0;
  margin-top: 0;
  margin-bottom: 10px;
  /** 3D Block Effect **/
  box-shadow: 0 10px 0 0 #6B2A4A;
  /** Make it look pretty **/
  display: block;
  background: #a47;
  color: #eee;
  padding: 1em 2em;
  border: 0;
  cursor: pointer;
  font-size: 1.2em;
  opacity: 0.9;
  border-radius: 10px;
}

.clicky:active {
  /** Remove 3D Block Effect on Click **/
  box-shadow: none;
  top: 10px;
  margin-bottom: 0;
}

.clicky:active:after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 1;
}

.clicky:hover {
  opacity: 1;
}

.clicky:active,
.clicky:focus {
  /** Remove Chrome's Ugly Yellow Outline **/
  outline: 0;
}

<button class="clicky" onclick="foo()">CLICK ME</button>

Answer 3

根据我的理解，我猜你也希望foo（）在点击按钮的阴影时触发。要实现这一点，请尝试将按钮放在包含按钮阴影的div中。为这个div提供onclick（）。通过这个你可以实现css转换以及foo（）事件的触发。

CSS 3d-Button＆＃34; onclick＆＃34; -event无法正常工作

3 个答案: