CSS 3d按鈕「onclick」 - 事件不起作用頂部

我有一個網站與3d按鈕。但他們不能點擊頂部或更好的CSS轉換工作，但「onclick」 - 事件沒有激活...它只是不工作在該地區，按鈕下降，並不再存在..CSS 3d按鈕「onclick」 - 事件不起作用頂部

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也被觸發？

如果有人能幫助我，這將是偉大的，謝謝！

來源

2017-09-28 rakael

這是什麼？而點擊它的作品fyn –

@rakael你的問題不清楚..你想要什麼？什麼是頂部和底部，我們無法理解這種方式。你還在哪裏點擊javascript功能？添加更多和清晰的細節。 –

我將代碼移入了一個代碼片段，這裏明確了他的意思：單擊按鈕頂部的按鈕，它具有點擊效果，但事件不會觸發 – SourceOverflow

這是因爲通過將按鈕的位置向下移動10px（top:10px在您的:active css類中），您正將其移出鼠標的方向。如果釋放鼠標而沒有移回到按鈕的hitbox，鼠標事件（在這種情況下爲mouseup）將觸發鼠標下面的任何事件，而不是按鈕上的click事件。

你可以做的是製作一個按鈕的容器，如<div>，並將事件處理程序放在上面。注意事件將需要爲mouseup，因爲click在這種情況下不會在任何元素上觸發。

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

演示，請注意，我改變了.clicky:active類.click:active, div.active .clicky來使其點擊下拉陰影也將導致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>

來源

2017-09-28 09:38:14

謝謝你的回答，這是肯定的可能性。但我也試過，現在右側按鈕旁邊的整個區域也正在調用該函數.. 是否沒有其他的可能性，在css轉換完成之前事件需要引用區域？ – rakael

@rakael，您可以更改容器的樣式，例如將其顯示屬性更改爲內嵌塊，以使其適合按鈕。編輯演示反映 –

完美，非常感謝！這工作完全正常:-) – rakael

中添加這個類的樣式。然後點擊頂部將工作在按下按鈕

.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>

來源

2017-09-28 09:41:22

非常感謝你！這是我正在尋找的東西。 :-)） – rakael

歡迎:) –

從我的理解我想你想，把foo（）按鈕的點擊何時啓陰影也是如此。爲了達到這個目的，可以嘗試將按鈕放在一個包含按鈕陰影的div中，然後爲這個div賦予onclick（）。通過這個你可以實現css轉換以及foo（）事件觸發。

來源

2017-09-28 09:42:00 Nivetha

CSS 3d按鈕「onclick」 - 事件不起作用頂部

回答

相關問題