代码之家 › 专栏 › 技术社区 › Astro-Otter

将jquery TouchEventListener转换为vanillaJs

addeventlistener jquery javascript

Astro-Otter · 技术社区 · 5 年前

旧代码如下:

var buttonMenu = $('.js-desktop-menu');
buttonMenu.on('click touch', function () {
  if ($(window).width() >= 992) {
    // Something
  } else {
    // Something else
  }
});

我把它改写成这样:

const buttonMenu = document.querySelector('.js-desktop-menu');
const clickEvent = (function() {
  if ('ontouchend' in document.documentElement)
    return 'touchend';
  else
    return 'click';
})

buttonMenu.addEventListener(clickEvent, function(e) {
  if (window.innerWidth >= 992) {
    // Something
  } else {
   // Something else
  }
});

1 回复 | 直到 5 年前

Rory McCrossan Hsm Sharique Hasan 5 年前

类型 addEventListener() . 现在您正在传递函数引用,但需要一个字符串。试试这个:

const buttonMenu = document.querySelector('.js-desktop-menu');
const getEventType = () => 'ontouchend' in document.documentElement ? 'touchend' : 'click';

buttonMenu.addEventListener(getEventType(), e => {
  if (window.innerWidth >= 992) {
    // Something
  } else {
    // Something else
  }
});

这里要注意两件事。首先,我使用三元表达式和箭头函数使函数变得更加简洁,但逻辑是相同的。

其次,你使用 querySelector() 这意味着只有一个元素将存在于具有所提供选择器的DOM中,但是您给它一个类选择器。如果您添加了多个 .js-desktop-menu 未来的元素。

推荐文章

Maroof Kadiri · 全局变量未在特定块中访问

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Gerald · 试图在addEventListener内设置表单的文件input.value=null

2 年前

Alx_Wil95 · script.js:3:20未捕获类型错误:无法读取null的属性(正在读取“addEventListener”)

2 年前

Pajurama Kreativagentur · 悬停时显示的图像在Safari中不起作用

2 年前

Kony Nunez · 在第一个按钮中添加一个事件侦听器,将<h1>中的文本更改为大写或全小写

2 年前

Mahdiyar · 使用AddEventlistener重新加载页面的Javascript

2 年前

Diana Heng · 如何为每个产品添加评论?

2 年前

xVentux · 为什么eventListener没有应用于按钮元素?

2 年前

user13286 · 让锚点元素上的点击事件监听器也应用于锚点的子元素[重复]

3 年前