AddEventListener 在 $(document).ready() 内部不工作

Question

我有以下部分代码用于 cordova 应用程序：

$('.shadow-slider').addEventListener("touchmove",function(e){
       e.preventDefault();
    update();
     shadow = x+"px "+y+"px ";
     if (op != 1){
    if(op.length > 3){op=op.substring(0, 3);}
    color="rgba("+r+","+g+","+b+","+op+")";
   }
   else{
    color="rgb("+r+","+g+","+b+")";
   }
   if (blur != 0){shadow += blur+"px ";}
   shadow += color;
   $('#object').css("text-shadow",shadow);
   $('#code-output').html("text-shadow:"+shadow+";");

   });

在 $(document).ready() 中用于某些滑块。

html:

<div class="container">
       <div class="jumbotron text-center">
         <h1 class="text-center"><span class='text-warning'>Text Shadow Generator V1.0</span></h1>
         <p>Create awesome text shadow with pure CSS3.</p>
       </div>
       <div id="sliders">
           <div class="row text-center">
             <div class="col-md-4">
             <h1>X-axis</h1>
             <input type="range" id="x" min="-10" max="10" step="1" value="0" class='shadow-slider'>
             </div>
             <div class="col-md-4">
               <h1>Y-axis</h1>
             <input type="range" id="y" min="-10" max="10" step="1" value="0" class='shadow-slider'>
             </div>
             <div class="col-md-4">
               <h1>Blur</h1>
             <input type="range" id="blur" min="0" max="10" step="1" value="0" class='shadow-slider'>
             </div>
           </div>
           <!--End for shadow axis and blur sliders-->
           <div class="container"  style="margin-top:1em;"><p id="object">All text shadows will be applied here</p></div>
           <div class="row text-center">
             <div class="col-md-3">
               <h1>Red</h1>
             <input type="range" id="red" min="0" max="255" step="1" value="0" class='shadow-slider'>
             </div>
             <div class="col-md-3">
               <h1>Green</h1>
             <input type="range" id="green" min="0" max="255" step="1" value="0" class='shadow-slider'>
             </div>
             <div class="col-md-3">
               <h1>Blue</h1>
             <input type="range" id="blue" min="0" max="255" step="1" value="0" class='shadow-slider'>
             </div>
             <div class="col-md-3">
               <h1>Opacity</h1>
             <input type="range" id="o" min="0" max="1" step="0.1" value="1" class='shadow-slider'>
             </div>
           </div>
       </div>

问题是，当使用 jquery addEventListener 方法时，touchmove 不是 working.Any 想法？

Answer 1

addEventListener 不是 jQuery 中的函数，您可以将其替换为：

$('.shadow-slider').on("touchmove",function(e){
  // your code here
});

addEventListener 用于纯 JS：

document.addEventListener('touchmove', function(e){
  // your code here
});

或对于 ID 为

的特定 html 标签

document.getElementById('myDiv').addEventListener('touchmove', function(e){
  // your code here
});

AddEventListener 在 $(document).ready() 内部不工作

AddEventListener is not working inside $(document).ready()

javascript

jquery

html

touch