如何處理Java腳本不同的元素事件響應式設計

在開發，我使用ZingTouch作爲處理爲基礎的移動事件，如刷卡，捏，搖攝JavaScript庫響應的網頁設計，旋轉等 我正在處理使用媒體查詢，但問題是決定網頁的行爲時，如果某一個元素可以說具有「點擊」事件，這類似於在桌面點擊事件將獲得兩次扳機，如果他們有相同的屬性設計它將搭載例如：如何處理Java腳本不同的元素事件響應式設計

$(document).ready(function() 
 
{ 
 
    //For mobiles and tablet,will not work as on click will over ride it 
 
    
 
    var menu = document.getElementById("list"); 
 
    var menuRegion = new ZingTouch.Region(menu); 
 
    menuRegion.bind(menu,'tap',function(){ 
 
    $("#list li").css("color","blue"); 
 
    }); 
 
    
 
    //For desktop 
 

 
    $("#list li").on('click',function(){ 
 
     $("#list li").css("color","orange"); 
 
     
 
     //alert("hello") different properties will be called in chain and both will execute i.e defined in tap as well as for click. 
 
    }); 
 
    
 
    //Some different event on same element with different properties will again over ride it 
 
    
 
    var menu1 = document.getElementById("main"); 
 
    var menuRegion1 = new ZingTouch.Region(menu1); 
 
    menuRegion1.bind(menu1,'swipe',function(){ debugger; 
 
    $("#list li").css("color","red"); 
 
    }); 
 
    
 
});

#list 
 
{ 
 
    border:1px solid red; 
 
    width:100px; 
 
} 
 
#main 
 
{ 
 
    border:1px solid orange; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/zingtouch/1.0.5/zingtouch.min.js"> </script> 
 
<body id="main"> 
 
<ul id="list"> 
 
<li> option 1</li> 
 
<li> option 2</li> 
 
<li> option 2</li> 
 
</ul> 
 
</body>

要查看由保持鼠標左鍵並移動光標左至右高達6〜8次看到效果導致對其滑動事件只是黃色箱內滑動。

問題是雖然所有這一切都在一個文件，這就是爲什麼發生這種情況，但如果我使用媒體查詢來檢測設計的分辨率我也必須做類似的JS，然後根據屏幕分辨率加載JS文件或可以選擇這個嗎？

來源

2017-08-17 Mehul Chachada

我發現了一個簡單的解決方案，但還沒有有效的解決這個問題可以有一些替代我在這裏猜測是示例代碼

$(document).ready() 
{ 
    function someName() 
    { 
    //the R.H.S width should be the one define in media query for laptops and desktop 
    if($(window).width() > 1281) 
    { 
     //Function logic goes here 
    } 
    } 
    $("elementname").on('click',function()) //can be any event click,mouseover etc 
    { 
    if($(window).width() > 1281) //check width 
    { 
     //Function logic goes here 
    } 
    }) 
    $("elementname").on('tap',function()) 
    { 

    }) 
}

因此，通過檢查寬度爲每個事件的腳本只能得到執行一次該設備，而不是用於移動或平板和兩個邏輯可以保持內部文件

來源

2017-08-18 13:57:33

如何處理Java腳本不同的元素事件響應式設計

回答

相關問題