javascript - jQuery Slider在移动设备上不起作用

我目前正在尝试弄清为什么我的滑块在移动设备上不起作用。我不确定这是不兼容还是事件侦听器问题。

滑块似乎在浏览器中工作正常，并且当滑块范围增大和减小时，表情符号也会更改。这就是我想要在移动设备上实现的目标。

这是我正在使用的：

var slider = document.getElementById("myRange1");
slider.addEventListener('mouseup', function(event) {
  var x = event.target.value
  console.log(x)
  if (x <= 5) {
    slider.className = '';
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
  }
})

var slider2 = document.getElementById("myRange2");
slider2.addEventListener('mouseup', function(event) {
  var x = event.target.value
  console.log(x)
  if (x <= 5) {
    slider2.className = '';
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
  }
})

var slider3 = document.getElementById("myRange3");
slider3.addEventListener('mouseup', function(event) {
  var x = event.target.value
  console.log(x)
  if (x <= 5) {
    slider3.className = '';
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
  }
})

input[type=range] {
  -webkit-appearance: none;
  height: 20px;
  width: 200px;
  max-width: 100%;
  margin: 25px auto;
  background: #08121c;
  border: 3px solid #08121c;
  border-radius: 100px;
  display: block;
}

input[type=range]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background-color: transparent;
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

input[type="range"].MyClass-1::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/10-smiling-face-with-smiling-eyes.svg);
}

input[type="range"].MyClass-2::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/37-relieved-face-2.svg);
}

input[type="range"].MyClass-3::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
}

input[type="range"].MyClass-4::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/19-star-struck-1.svg);
}

input[type="range"].MyClass-5::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}

<input name="entry.878505724" type="range" id="myRange1" min="1" max="5" value="3" step="1" />
<input name="entry.165236575" type="range" id="myRange2" min="1" max="5" value="3" />
<input name="entry.425406382" type="range" id="myRange3" min="1" max="5" value="3" step="1" />

帮助将不胜感激。

最佳答案

在移动设备中检查此代码。

function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

var slider = document.getElementById("myRange1");

addListenerMulti(slider, 'mouseup touchend', function(event){
  var x = event.target.value
  console.log(x)
  if (x <= 5) {
    slider.className = '';
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
    slider.className = `MyClass-${x}`;
  }
});

var slider2 = document.getElementById("myRange2");
addListenerMulti(slider2, 'mouseup touchend', function(event){
  var x = event.target.value
  console.log(x)
  if (x <= 5) {
    slider2.className = '';
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
    slider2.className = `MyClass-${x}`;
  }
});

var slider3 = document.getElementById("myRange3");
addListenerMulti(slider3, 'mouseup touchend', function(event){
  var x = event.target.value
  console.log(x)
  if (x <= 5) {
    slider3.className = '';
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
    slider3.className = `MyClass-${x}`;
  }
});

input[type=range] {
  -webkit-appearance: none;
  height: 20px;
  width: 200px;
  max-width: 100%;
  margin: 25px auto;
  background: #08121c;
  border: 3px solid #08121c;
  border-radius: 100px;
  display: block;
}

input[type=range]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background-color: transparent;
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

input[type="range"].MyClass-1::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/10-smiling-face-with-smiling-eyes.svg);
}

input[type="range"].MyClass-2::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/37-relieved-face-2.svg);
}

input[type="range"].MyClass-3::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
}

input[type="range"].MyClass-4::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/19-star-struck-1.svg);
}

input[type="range"].MyClass-5::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}

<input name="entry.878505724" type="range" id="myRange1" min="1" max="5" value="3" step="1" />
<input name="entry.165236575" type="range" id="myRange2" min="1" max="5" value="3" />
<input name="entry.425406382" type="range" id="myRange3" min="1" max="5" value="3" step="1" />