A. 給按鈕添加了點擊事件，讓ul向左移動，設置了transition延時，為什麼第一點擊沒有延時。
你要把代碼帖出來看下才知道問題在哪裡。
另外 ，做滾動切換效果，有很多現成的庫可以用，各種前端框架有自帶的Carousel效果
如 bootstrap , antdesign 等。
另外還有一個比較好用的 swiper(有好幾個版本，最新版4)，我都用過，官網也有很多示例可以參考。
希望對你有幫助。
B. 前端用jquery如何去獲取一個dom未渲染的標簽添加點擊事件
給要點擊的dom加個id或者class，例如叫click-dom
然後$('#click-dom').on('click',function(){
//點擊後要做的操作
})
C. 初學後端，django 怎麼添加前端按鈕點擊事件
和django沒什麼關系。無非兩種，get和post。返回到前端頁面，刷新或者無刷新，無刷新就用ajax，刷新就重新渲染頁面。
D. 關於web前端的一個如何使按鈕連接的方法
<html>
<head>
<title>簡易計算器</title>
<script>
functiondisplay(val){
vardisplay=document.getElementById("display");
display.value+=val;
}
functionresult(){
vardisplay=document.getElementById("display");
varres=eval(display.value);
display.value=res;
}
functiontoClear(){
document.getElementById("display").value="";
}
window.onload=function(){
document.onkeydown=function(e){
e=e||event;
varkeyCode=e.keyCode;
//alert(keyCode);
varshiftKey=e.shiftKey;
if(shiftKey){//shift+按鍵
switch(keyCode){
case56:
display("*");
break;
case187:
display("+");
break;
}
}else{//普通按鍵
switch(keyCode){
case48:
case49:
case50:
case51:
case52:
case53:
case54:
case55:
case56:
case57:
display(keyCode-48);
break;
case67:
toClear();
break;
case106:
display("*");
break;
case107:
display("+");
break;
case109:
case189:
display("-");
break;
case111:
case191:
display("/");
break;
case187:
result();
break;
}
}
}
}
</script>
<styletype="text/css">
input{
height:2.5em;
width:5em;
}
input#display{
width:100%;
}
</style>
</head>
<body>
<tableborder="1"align="center"frame="box"rules="all">
<tr>
<tdcolspan="3"><inputtype="text"id="display"disabled/></td>
<td>
<inputname="按鈕"type="button"onClick="result()"value="計算"/></td>
</tr>
<tr>
<td><inputtype="button"value="7"onClick="display(this.value)"/></td>
<td><inputtype="button"value="8"onClick="display(this.value)"/></td>
<td><inputtype="button"value="9"onClick="display(this.value)"/></td>
<td><inputtype="button"value="+"onClick="display(this.value)"/></td>
</tr>
<tr>
<td><inputtype="button"value="4"onClick="display(this.value)"/></td>
<td><inputtype="button"value="5"onClick="display(this.value)"/></td>
<td><inputtype="button"value="6"onClick="display(this.value)"/></td>
<td><inputtype="button"value="-"onClick="display(this.value)"/></td>
</tr>
<tr>
<td><inputtype="button"value="1"onClick="display(this.value)"/></td>
<td><inputtype="button"value="2"onClick="display(this.value)"/></td>
<td><inputtype="button"value="3"onClick="display(this.value)"/></td>
<td><inputtype="button"value="*"onClick="display(this.value)"/></td>
</tr>
<tr>
<td><inputtype="button"value="."onClick="display(this.value)"/></td>
<td><inputtype="button"value="0"onClick="display(this.value)"/></td>
<td><inputtype="button"value="C"onClick="toClear()"/></td>
<td><inputtype="button"value="/"onClick="display(this.value)"/></td>
</tr>
</table>
</body>
</html>
其實主要就是加個鍵盤事件監聽，這里用的keydown，改成keyup亦可，然後主要是了解思想，代碼僅供參考
E. 關於前端JavaScript的問題，動態生成的元素怎麼綁定事件
閉包問題
你的selectedWord每次循環都重新賦值了，當你執行click函數的時候，循環已經走完了，從作用域鏈來看，selectedWord指向的是元素最後一個，所以selectedWord.innerHtml里的內容自然不對。
可以用閉包進行處理，讓每一次的selectedWord的賦值都是獨立在一個作用域中。
或者簡單一點，把click中的selectedWord換成this試試。
F. Web前端如何使用Vue編寫一個長按指令
今天小編要跟大家分享的文章是關於Web前端如何使用Vue編寫一個長按指令?正在從事web前端工作的小夥伴們有沒有想過只需按住一個按鈕幾秒鍾就能在你的 G. js怎麼給一個按鈕添加兩個事件
從你給的截圖看是要實現這個功能吧.. H. js如何實現等待1秒後執行一個事件 需要准備的材料分別有：電腦、html編輯器、瀏覽器。 1、首先，打開html編輯器，新建html文件，例如：index.html。 I. 用js怎麼寫一個回車鍵盤事件 一、設計思路：設計一個簡單的輸入對話框，然後按下enter進行輸入事件。 二、聊天輸入框的代碼如下： J. html如何設置打開網頁時自動觸發按鈕的單擊事件 在<body>里加一個onload="abc()"的屬性就行了，abc()即為處理的方法。
Vue應用中觸發一個功能?
有沒有想過創建一個按鈕，按下一次就可以清除單次輸入(或者持續按住可以清除所有輸入)?
本文就是講解如何在按下(或者按住)一個按鈕時，既執行一個函數，又清除輸入。
首先，我會講解如何使用純JS實現。而後也會創建一個Vue指令。下面就讓我們一起來看一看吧。
一、原理
要實現長按，用戶需要按下並按住按鈕幾秒鍾。
想通過代碼模擬這一效果，我們需要在滑鼠「點擊」按下按鈕時，啟動一個計時器監聽用戶按下的時長，如果時間超過我們期望的時長，就執行相應的函數。
非常簡單!然而，我們需要知道用戶何時按住按鈕。
二、如何實現
當用戶點擊按鈕時，在點擊事件之前會觸發另外兩個事件:mousedown和mouseup。
當用戶按下按鈕時觸發mousedown事件，用戶松開按鈕時調用mouseup事件。
我們需要做的是:
1.mousedown事件觸發時，啟動計時器。
2.一旦mouseup事件在預期的2秒前被觸發，就清除計時器，不要執行相應的函數。就當作一個普通的點擊事件。
只要計時器在我們預設的時間內沒有被清除，即mouseup
事件沒有被觸發——那麼可以斷定用戶沒有釋放按鈕。因此，可以判定為一次長按，可以執行關聯的函數。
三、實踐
讓我們深入代碼，完成這一功能。
首先，我們必須定義三件事，即:
1.一個變數用於存儲計時器。
2.一個啟動功能函數，用於啟動計時器。
3.一個取消功能函數，用於取消計時器。
1、變數
這個變數主要用來保存setTimeout的值，以便當滑鼠mouseup事件觸發時我們可以取消它。
letpressTimer=null;
我們把變數值設置為null是為了在執行取消操作前，檢查這個變數的值判斷當前是否有一個正在運行的計時器。
2、啟動函數
這個函數包括一個setTimeout，它是JavaScript中的一個基本方法，允許在特定時間之後執行一個函數。
注意，click事件執行的過程中，會觸發另外兩個事件。但是我們需要啟動計時器的是mousedown
事件。如果只是點擊事件，不需要啟動計時器。//創建計時器(1s之後執行函數)
letstart=(e)=>{
//如果是點擊事件，不啟動計時器
if(e.type==='click'&&e.button!==0){
return;
}
//在啟動一個定時器之前確保沒有正在運行的計時器
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//執行任務!!!
},1000)
}
}
3、取消函數
這個函數見名知意，用來取消啟動函數創建的setTimeout。
要取消setTimeout，可以使用JavaScript中的clearTimeout方法，它主要用來清除setTimeout()
方法設置的計時器。
在使用clearTimeout之前，需要檢查pressTimer變數是否為null。如果沒有為
ull，意味著有一個正在運行的計時器。因此，我們需要先清除它，並且將pressTimer變數設置為null。letcancel=(e)=>{
//檢查pressTimer的值是否為null
if(pressTimer!==null){
clearTimeout(pressTimer)
pressTimer=null
}
}
一旦mouseup事件觸發，這個函數就會被調用。
4、設置觸發器
剩下的就是將事件監聽器添加到想要長按效果的按鈕上。
addEventListener("mousedown",start);
addEventListener("click",cancel);
以上代碼合到一起是這樣://定義變數
letpressTimer=null;
//創建計時器(1秒後執行函數)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//執行任務!!!
},1000)
}
}
//停止計時器
letcancel=(e)=>{
//檢查是否有正在運行的計時器
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//選擇id為longPressButton的元素
letel=document.getElementById('longPressButton');
//添加事件監聽器
el.addEventListener("mousedown",start);
//長按事件取消，取消計時器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
5、用Vue指令包裝
創建Vue指令時，可以創建全局或局部指令，本文中，我們採用全局指令。
首先，我們必須聲明自定義指令的名稱。
Vue.diective('longpress',{
})
這就注冊了一個名為v-longpress的全局自定義指令。
接下來，我們添加帶參數的bind鉤子函數，它允許我們引用指令綁定的元素，獲取傳遞給指令的值，並標識指令使用的組件。Vue.directive('longpress',{
bind:function(el,binding,vNode){
}
})
接下來，我們在bind函數中添加長按功能的代碼。Vue.directive('longpress',{
bind:function(el,binding,vNode){
//定義變數
letpressTimer=null;
//定義函數處理程序
//創建計時器(1秒後執行函數)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//執行任務!!!
},1000)
}
}
//取消計時器
letcancel=(e)=>{
//檢查是否有正在運行的計時器
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//添加事件監聽器
el.addEventListener("mousedown",start);
//取消計時器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
}
})
接下來，我們需要添加一個函數來運行傳遞給longpress指令的方法。Vue.directive('longpress',{
bind:function(el,binding,vNode){
//定義變數
letpressTimer=null;
//定義函數處理程序
//創建計時器(1秒後執行函數)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//執行函數
handler();
},1000)
}
}
//停止計時器
letcancel=(e)=>{
//檢查是否有正在運行的計時器
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//運行函數
consthandler=(e)=>{
//執行傳遞給指令的方法
binding.value(e)
}
//添加事件監聽器
el.addEventListener("mousedown",start);
//取消計時器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
}
})
現在，可以在Vue應用中使用這個指令了，除非使用者給指令傳入的值不是一個函數。因此，我們需要通過警告反饋給使用者。
為了反饋給使用者，我們在bind函數中添加了以下內容://確保提供的表達式是函數
if(typeofbinding.value!=='function'){
//獲取組件名稱
constcompName=vNode.context.name;
//將警告傳遞給控制台
letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;
if(compName){warn+=`Foundincomponent'${compName}'`}
console.warn(warn);
}
最後，如果這個指令也適用於觸屏設備，那會是極好的。因此，我們添加了touchstart、touchend和touchcancel
事件監聽器。
最終代碼如下:Vue.directive('longpress',{
bind:function(el,binding,vNode){
//確保提供的表達式是函數
if(typeofbinding.value!=='function'){
//獲取組件名稱
constcompName=vNode.context.name;
//將警告傳遞給控制台
letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;
if(compName){warn+=`Foundincomponent'${compName}'`}
console.warn(warn);
}
//定義變數
letpressTimer=null;
//定義函數處理程序
//創建計時器(1秒後執行函數)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//執行函數
handler();
},1000)
}
}
//取消計時器
letcancel=(e)=>{
//檢查計時器是否有值
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//運行函數
consthandler=(e)=>{
//執行傳遞給指令的方法
binding.value(e)
}
//添加事件監聽器
el.addEventListener("mousedown",start);
el.addEventListener("touchstart",start);
//取消計時器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
el.addEventListener("touchend",cancel);
el.addEventListener("touchcancel",cancel);
}
})
現在可以在Vue組件里使用了：
1.在輸入框輸入頁碼,按回車後,跳轉到對應的頁面
2.在輸入框輸入頁碼,點擊後面的確定按鈕,,跳轉到對應的頁面
這里其實不是把兩個事件都綁定到按鈕上.而是輸入框和按鈕各一個.
輸入框相應回車事件,按鈕相應點擊事件.
及input的onkeydown或onkeypress事件,與按鈕的click事件.
你可以寫一個方法來實現到目標頁.
function goPage(){};
input 的onkeydown或onkeypress事件
input.onkeydown=function(){
//在這里先加入判斷是否按了回車,,看樓上的.
//然後調用翻頁事件.
goPage();
}
按鈕的click事件可以直接這么寫
btn.click=goPage();
