CSS 3d-button "onclick" -eventがトップで動作しない

Question

私は3Dボタン付きのウェブサイトを持っています。しかし、それらは上にクリック可能ではなく、CSS変換が機能していますが、 "onclick" -eventは起動していません...ボタンが消えてもうそこにない領域でのみ動作しています。

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

/** 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; 
 
}

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

は、それはユーザーが一番上に3D-ボタンをクリックしたときに "onclickの" -eventもトリガされていることを、可能ですか？

誰かが私を助けることができれば嬉しいです、ありがとう！

Answer 1

10px（:active cssクラスのtop:10px）ボタンの位置を下に移動すると、マウスの動きが妨げられます。マウスがボタンのヒットボックスに戻らずに解放された場合、マウスイベント（この場合はmouseup）は、ボタンのclickイベントではなく、マウスの下にあるものでトリガーされます。

あなたができることは、<div>のようなボタン用のコンテナを作成し、その上にイベントハンドラを置くことです。どちらの要素でも、イベントはmouseupである必要があります。この場合、clickはトリガーされません。

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

デモでは、私はそれがとてもドロップシャドウをクリックすると、また、CSSの変更

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

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; 
 
}

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

Answer 2

はあなたにこのクラスを追加原因となります作るために.click:active, div.active .clickyに.clicky:activeクラスを変更注意してくださいスタイル。その後トップをクリックして押しボタンを

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

に動作します、ボタンの上でクリックしたときに起動するように）私はあなたが（FOOをしたいと思います私の理解からの抜粋

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

を参照してください。これを達成するには、ボタンの影も含むdiv内にボタンを配置して、このdivのonclick（）を与えてみてください。これで、CSS変換とfoo（）イベントの両方が発生します。