brinley / jSignature

jQuery plugin for adding web signature functionality
http://www.unbolt.net/jSignature
691 stars 529 forks source link

Chrome - Mouse vs. Touch input #135

Open SuperVillainPresident opened 7 years ago

SuperVillainPresident commented 7 years ago

You can see the issue on the unbolt jsignature page. On chrome, once you use mouse or touch, it will stop you from using the other. Example: I start by using a touch screen and it works fine. I then try to use the mouse to finish and it doesn't allow input from the mouse on the signature pad. Same in reverse: if I start with mouse input then I can't use touch. I've also tested this on Edge and it works as expected.

SuperVillainPresident commented 7 years ago

I found that if I removed the commented out sections below it solved my problem with chrome and still functioned on Edge.

function (a, b, c) {
                var e = this.canvas,
                h = $(e);
                this.isCanvasEmulator ?
                (h.bind("mousemove.jSignature", c), h.bind("mouseup.jSignature", a), h.bind("mousedown.jSignature", b))
                 : (e.ontouchstart = function (h) {
                     //e.onmousedown = e.onmouseup = e.onmousemove = void 0;
                     this.fatFingerCompensation = d.minFatFingerCompensation && -3 * d.lineWidth > d.minFatFingerCompensation ? -3 * d.lineWidth : d.minFatFingerCompensation;
                     b(h);
                     e.ontouchend = a;
                     e.ontouchstart = b;
                     e.ontouchmove = c
                 },
                    e.onmousedown = function (d) {
                        //e.ontouchstart = e.ontouchend = e.ontouchmove = void 0;
                        b(d);
                        e.onmousedown = b;
                        e.onmouseup = a;
                        e.onmousemove = c
                    },
                    window.navigator.msPointerEnabled && (e.onmspointerdown = b, e.onmspointerup = a, e.onmspointermove = c))
            }).call(this, e.drawEndHandler, e.drawStartHandler, e.drawMoveHandler);
            b["jSignature.windowmouseup"] = h.subscribe("jSignature.windowmouseup", e.drawEndHandler);
            this.events.publish("jSignature.attachingEventHandlers");
            r.call(this, this, d.width.toString(10), "jSignature", h);
            this.resetCanvas(d.data);
            this.events.publish("jSignature.initialized");
            return this
        }
caot commented 4 years ago

What mentioned by @SuperVillainPresident does work. Here is the case for me. The commented out sections are as the follows:

      (function (a, b, c) {
        var d = this.canvas,
        g = $(d);
        if (this.isCanvasEmulator) g.bind('mousemove.jSignature', c),
        g.bind('mouseup.jSignature', a),
        g.bind('mousedown.jSignature', b);
         else {
          var m = 'function' === typeof d.addEventListener;
          this.ontouchstart = function (g) {
//            d.onmousedown = d.onmouseup = d.onmousemove = void 0;
            this.fatFingerCompensation = e.minFatFingerCompensation && - 3 * e.lineWidth > e.minFatFingerCompensation ? - 3 * e.lineWidth : e.minFatFingerCompensation;
            b(g);
            m ? (d.addEventListener('touchend', a), d.addEventListener('touchstart', b), d.addEventListener('touchmove', c))  : (d.ontouchend = a, d.ontouchstart = b, d.ontouchmove = c)
          };
          m ? d.addEventListener('touchstart', this.ontouchstart)  : d.ontouchstart = ontouchstart;
          d.onmousedown = function (g) {
//            m ? d.removeEventListener('touchstart', this.ontouchstart)  : d.ontouchstart = d.ontouchend = d.ontouchmove = void 0;
            b(g);
            d.onmousedown = b;
            d.onmouseup = a;
            d.onmousemove = c
          };
          window.navigator.msPointerEnabled && (d.onmspointerdown = b, d.onmspointerup = a, d.onmspointermove = c)
        }
      }).call(this, g.drawEndHandler, g.drawStartHandler, g.drawMoveHandler);
      a['jSignature.windowmouseup'] = d.subscribe('jSignature.windowmouseup', g.drawEndHandler);
      this.events.publish('jSignature.attachingEventHandlers');
      n.call(this, this, e.width.toString(10), 'jSignature', d);
      this.resetCanvas(e.data);
      this.events.publish('jSignature.initialized');
      return this
    }