Forums » Help » Using Mouse Clicks with Touch Button Plugin

Hello.

Is it possible to modify the touch button plug in so that it registers both
touch events and mouse clicks?

How could I go about doing this?

I added these listeners

document.addEventListener( 'touchstart', this.touchStart.bind(this), false );
//Mouse Down ( I add this )
 document.addEventListener( 'mousedown', this.touchStart.bind(this), false );
document.addEventListener( 'touchend', this.touchEnd.bind(this), false );
//Mouse Up ( I add this )
 document.addEventListener( 'mouseup', this.touchEnd.bind(this), false );

But I get this error:

Uncaught TypeError: Cannot read property 'length' of undefined touch-button.js:54

So I look at line 54

for( var i = 0; i < ev.touches.length; i++ ) {

Is there a mouse equivalent of "touches" or a better way to go about this?

Nevermind...

I got it working with a really ugly hack.

Since I only needed on and off:

These listeners

document.addEventListener( 'touchstart', this.touchStart.bind(this), false );
document.addEventListener( 'mousedown', this.clickStart.bind(this), false );
document.addEventListener( 'touchend', this.touchEnd.bind(this), false );
document.addEventListener( 'mouseup', this.clickEnd.bind(this), false );

And these functions (hacked up Dom's)

clickStart: function( ev ) {	
	var el = ig.system.canvas;
	var pos = {left: 0, top: 0};
		while( el != null ) {
			pos.left += el.offsetLeft;
			pos.top += el.offsetTop;
			el = el.offsetParent;
		}
	this.pressed = true;
	ig.input.actions[this.action] = true;
		if( !ig.input.locks[this.action] ) {
			ig.input.presses[this.action] = true;
			ig.input.locks[this.action] = true;
		}		
		
},
	
clickEnd: function( ev ) {
	this.pressed = false;
	this.touchId = 0;
	ig.input.delayedKeyup[this.action] = true;				
},

Ok. I see the problem.
"touches" seems to be a call
specific to touch screen devices.

I can find no equivalent for mouses.
Apparently I have to hook them to divs or other html elements.

I'm going to use

if( ig.ua.mobile ) 

to serve different code to touch screen devices
and create divs using .innerHTML to allow mouse input.

Please add to this thread if you find a better way to integrate
the touchbutton plugin with mouse clicks or can help me with my dumb self.

Donzo, if you can use entities for your buttons try this plugin: https://gist.github.com/Houly/1395616

I finally got around to trying out that plugin, y0ungb0b.
It works nicely.

I like how you can put fonts on the buttons.

I had some issues with the Touch-Button plugin earlier,
because I am a stoopid idiot,

and I forgot that I did this in the main.js init():

ig.input.bind(ig.KEY.MOUSE1, 'click');	

The mouse click input interfered with the touchbuttons,
causing them to be unresponsive.

Once I remembered how dumb I was,
I used a clever combination of this:

ig.input.unbind( ig.KEY.MOUSE1 );

and this:

ig.input.bind(ig.KEY.MOUSE1, 'click');	

To switch back and forth between the click modes.