Javascript 如何在java脚本中处理不同元素上的事件以实现响应式设计

在开发响应性web设计时，我使用ZingTouch作为javascript库来处理基于移动的事件，如滑动、挤压、平移、旋转等 我正在使用媒体查询处理设计，但问题是，当决定网页行为时，如果某个元素有一个类似于点击事件的“点击”事件，桌面上的事件将触发两次，如果它们具有相同的属性，则会触发，例如：

$（文档）.ready（函数（）
{
//对于手机和平板电脑，将不会工作，因为点击将超过它
var菜单=document.getElementById（“列表”）；
var menuRegion=新锌接触区（菜单）；
绑定（菜单，'tap'，函数（）{
$（“#list li”）.css（“颜色”、“蓝色”）；
});
//用于桌面
$（“#list li”）。在（'click'，function（）上{
$（“#list li”）.css（“颜色”、“橙色”）；
//警报（“hello”）将在链中调用不同的属性，这两个属性都将执行，即在tap中定义的属性以及单击属性。
});
//同一元素上具有不同属性的不同事件将再次覆盖它
var menu1=document.getElementById（“主”）；
var menuRegion1=新锌接触区（menu1）；
bind（menu1，'swipe'，function（）{debugger；
$（“#列表li”）.css（“颜色”、“红色”）；
});
});
#列表
{
边框：1px纯红；
宽度：100px；
}
#主要
{
边框：1px实心橙色；
填充：10px；
}


选项1
选项2
选项2

我找到了一个简单的解决方案，但对于解决这个问题还是很有效的。我想这里是示例代码

$(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())
  {

  })
}

因此，通过检查每个事件的宽度，该脚本只会在该设备上执行一次，而不会在移动设备或平板电脑上执行一次，两种逻辑都可以保存在文件中