DOMException could not execute 'setPointerCapture' in 'Element' and 'releasePointerCapture'

Question

I created a hybrid application in which I used bxslider and placed the div inside it, as it should

<div class="bxslider"> <div id="chart1" style="text-align:center"> <span id="barChartTitle">Bar Chart</span> <svg id="chartCanvas" class="margintop40"></svg> </div> <div id="chart2" style="text-align:center"> <span id="trendChartTitle">Trend Chart</span> <svg id="chartCanvas" class="margintop40"></svg> </div> </div> 

when ever touching bxslider in html view i get the following error:

  jquery.bxslider.js:1109 Uncaught DOMException: Failed to execute 'setPointerCapture' on 'Element': InvalidPointerId at HTMLDivElement.onTouchStart (http://localhost:8100/js/jquery.bxslider.js:1109:34) at HTMLDivElement.dispatch (http://localhost:8100/js/jquery-3.1.1.min.js:3:10315) at HTMLDivElement.q.handle (http://localhost:8100/js/jquery-3.1.1.min.js:3:8342) onTouchStart @ jquery.bxslider.js:1109 dispatch @ jquery-3.1.1.min.js:3 q.handle @ jquery-3.1.1.min.js:3 jquery.bxslider.js:1234 Uncaught DOMException: Failed to execute 'releasePointerCapture' on 'Element': InvalidPointerId at HTMLDivElement.onTouchEnd (http://localhost:8100/js/jquery.bxslider.js:1234:32) at HTMLDivElement.dispatch (http://localhost:8100/js/jquery-3.1.1.min.js:3:10315) at HTMLDivElement.q.handle (http://localhost:8100/js/jquery-3.1.1.min.js:3:8342) 

I searched a lot, but could not find out why the error occurs, please help.

Answer 1

Here is a workaround that works. Use this piece of code:

 var chromePointerEvents = typeof PointerEvent === 'function'; if (chromePointerEvents) { if (orig.pointerId === undefined) { return; } } 

Paste after:

 touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig]; 

jquery.bxslider.js file

Read more here to read the simplicity of the trade answer on Github .