尝试通过“ touchstart”在触摸屏上启动波纹效果

Question

我正在使用jQuery插件来产生涟漪效果。 Here 是插件的链接。 我想要的是在触摸设备上使用touchstart触发效果，以改善这些设备上的体验。我尝试更换：
mousedown-> touchstart
mouseup-> touchend
dragend-> touchleave
但它根本没有用，我也不知道该怎么解决。 您可以修改jQuery以使用touchstart触发效果吗？
这是原始代码的片段：

// Get all the elements that requiere the effect
var rippleButton = document.querySelectorAll('[data-ripple-effect]'),
  i;

// The animation function
function rippleEffect(event) {
  // Getting the div that the effect is relative to
  var box = this.lastElementChild,
    x,

    // Creating the effect's div
    create = document.createElement('div'),

    // Getting the button's size, distance to top and left
    boxWidth = box.offsetWidth,
    boxHeight = box.offsetHeight,
    boxY = box.getBoundingClientRect().top,
    boxX = box.getBoundingClientRect().left,

    // Getting the mouse position
    mouseX = event.clientX,
    mouseY = event.clientY,

    // Mouse position relative to the box
    rippleX = mouseX - boxX,
    rippleY = mouseY - boxY,

    // Calculate distance to farest corner
    rippleWidth = boxWidth / 2 < rippleX ? rippleX : boxWidth - rippleX,
    rippleHeight = boxHeight / 2 < rippleY ? rippleY : boxHeight - rippleY,

      // Distance to the farest corner
    boxSize = Math.sqrt(Math.pow(rippleWidth, 2) +
                        Math.pow(rippleHeight, 2)),

    // Getting the type value for multiple ripples at the same time
    multi = this.getAttribute('data-multi-ripple'),

    // Getting the button computed style
    thisStyle = window.getComputedStyle(this);

  // Allowing multiple ripples at same time or not
  if (multi === 'no' || multi === 'false' || multi === '0') {
    this.removeEventListener('mousedown', rippleEffect);
  }

  // Creating and moving the effect div inside the button
  box.appendChild(create);

  // Ripple style (size, position, color and border-radius)
  create.classList.add('ripple-effect');
  create.style.height = 2 * boxSize + 'px';
  create.style.width = 2 * boxSize + 'px';
  create.style.top = mouseY - boxY - boxSize + 'px';
  create.style.left = mouseX - boxX - boxSize + 'px';
  box.style.borderTopLeftRadius =
    thisStyle.getPropertyValue('border-top-left-radius');
  box.style.borderTopRightRadius =
    thisStyle.getPropertyValue('border-top-right-radius');
  box.style.borderBottomLeftRadius =
    thisStyle.getPropertyValue('border-bottom-left-radius');
  box.style.borderBottomRightRadius =
    thisStyle.getPropertyValue('border-bottom-right-radius');
  setTimeout(function () {
    create.classList.add('ripple-effect-start');
  }, 0);

  // Delete animation function
  function removeChild() {
    create.classList.remove('ripple-effect-start');
    create.classList.add('ripple-effect-end');
    setTimeout(function () {
      box.removeChild(create);
    }, 500);
    window.removeEventListener('mouseup', removeChild);
    window.removeEventListener('dragend', removeChild);
    if (multi === 'no' || multi === 'false' || multi === '0') {
      box.parentElement.addEventListener('mousedown', rippleEffect);
    }
  }

  // Delete  div after animation finished
  window.addEventListener('mousedown', function () {
    x = false;
  });
  window.addEventListener('mouseup', function () {
    x = true;
  });
  window.addEventListener('dragend', function () {
    x = true;
  });
  setTimeout(function () {
    if (x) {
      removeChild();
    } else {
      window.addEventListener('mouseup', removeChild);
      window.addEventListener('dragend', removeChild);
    }
  }, 600);
}

window.onload = function () {
  // Adding to all the elements the necesary div and the event listener to run
  // the animation
  for (i = 0; i < rippleButton.length; i += 1) {
    var create = document.createElement('div'),
      button = rippleButton[i];

    // Adding the listener to run the effect
    button.addEventListener('mousedown', rippleEffect);

    // Creating a div inside the mask-div to be the reference for the ripple
    // position
    rippleButton[i].appendChild(create);
    create.classList.add('ripple-effect-box');
  }
};

/* ========================================================================= */
/* RIPPLE EFFECT =========================================================== */
/* ========================================================================= */

[data-ripple-effect] {
  position: relative; /* Setting the element relative for reference */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* box which contains the ripple */
.ripple-effect-box {
  background-color: rgba(0,0,0,0);
  height: 100%;
  left: 0;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  position: absolute;
  top: 0;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  width: 100%;
  z-index: 1;
}

/* Ripple Effect style (background, border-radius, time) */
.ripple-effect {
  background-color: rgba(0,0,0,0.1);
  border-radius: 100%;
  position: absolute;
  opacity: 0;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.ripple-effect-start {
  opacity: 1;
  -moz-transform: scale(1.0);
  -ms-transform: scale(1.0);
  -o-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}

.ripple-effect-end {
  opacity: 0;
  -moz-transform: scale(1.0);
  -ms-transform: scale(1.0);
  -o-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}


.button {
background: #eee;
border: none;
outline: none;
padding: 8px 12px;
border-radius: 2px;
cursor: pointer;}

<button class="button" data-ripple-effect data-multi-ripple="0">Ripple</button>