如何通过元素或其子元素启用触发器事件

Question

我正在使用hammer.js在ul上启用触摸gesutre。

ul有li个元素，每个li都有一个img。直接拖动ul本身时，ul功能正常。但是，如果我尝试拖动其子元素（li或img），则没有任何反应。即使在其子元素中单击时，如何使其能够启用拖动/触摸？

演示：codepen。

HTML：

<div id="wrapper">
  <ul>
    <li>
      <img src="http://www.natureasia.com/common/img/splash/thailand.jpg">
    </li>
    <li>
      <img src="http://images4.fanpop.com/image/photos/19500000/Wow-nature-19546776-600-400.jpg">
    </li>
    <li>
      <img src="http://i499.photobucket.com/albums/rr359/jatruong/nature-wallpaper-11.png">
    </li>
    <span class="clear-both"></span>
  </ul>
</div>

JS：

var element = $('ul');

element.hammer().on('pan', function(event) {
  console.log('pan-x: ' + event.gesture.deltaX + 'px');
  element.css('left', event.gesture.deltaX);
});

element.hammer().on('panend', function(event) {
  element.css('left', '0px');
});