Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Changing links to mousedown

edited August 2016 in Help! with 1.x
I've noticed that one reason for some sluggishness in my game is that the default HTML links only activate after mouse up events. Naturally, this is how most websites work.

However, I'd like to change this, since my game is very graphical, and in most games, events are on mousedown. Hence it creates a bad comparison between my game and others.

I'm doing some research, but does anyone know off the top of their heads how to change link clicks to mousedown rather than mouseup?

Eg, I guess is there any easy way to use javascript to prevent the default click event, then redefine the click event to fire on mousedown?

Comments

  • What does mouse down or mouse up mean? Do you mean append or something?
  • Deadshot wrote: »
    What does mouse down or mouse up mean?
    Generally whenever you use the left mouse button to click on an element (link, image, etc..) on a web-page three events related to that button are sent to that element, the events are:

    1. mousedown: the mouse button was depressed (pressed down)
    2. mouseup: the mouse button was released
    2. click: one mousedown and one mouseup in sequence was detected on the element.
  • edited August 2016
    My game isn't in a webpage, but rather a nw.js app, so am looking to overwrite some of the default web page behaviour that is not suitable for an app. You'll be hard pressed to find a native game that uses mouse up to register clicks, eg just look at starcraft. So mouseup feels slow.
  • Claretta wrote: »
    My game isn't in a webpage, but rather a nw.js app
    I am assuming you are aware that your game is still a web-page that is now embedded/hosted within a custom web-browser based on the web-kit render engine.
  • edited August 2016
    I don't call it a webpage as there's a measurable difference between apps made in HTML5 and webpages made to be navigated to part of the world wide web, hence my difference in terminology. Just like games written in HTML5 and sold on Steam are games, not webpages, even though they could also be hosted as webpages online.

    Eg: http://indiegamemag.com/wp-content/uploads/2015/05/goblins_and_grottos_04.jpg

    That game's the same thing of HTML in nw.js. I would never call that a webpage even though it has the same HTML structure of one. For one thing, it has a completely different control ui to a webpage, just like my game, which relies on both keyboard and mouse clicks.

    But I'd prefer to focus on the question at hand? I'm a bit lost as to the point of that last post. There are valid reasons why I want to change clicks to activate on mousedown.
  • I solved this question myself so don't need any more answers thanks. :) Thanks for all the replies so far.
  • edited August 2016
    You already seem to have come up with a resolution, but I'll chime in anyway since I find this somewhat interesting. I'm also kind of interested in what you eventually went with. Care to share?

    Anyway. The first thing that comes to mind would be to change the event used from "click" to "mousedown". That would be somewhat difficult in SugarCube v1, since event handler attachment points are scattered around. In SugarCube v2, virtually all clickables are, eventually, setup via its ariaClick() jQuery plugin method, so patching that to use "mousedown" instead of "click" would catch most things—I should probably make that configurable, if possible.

    Alternatively, it should be possible to stop propagation of all normal user "click" events while firing your own "click" event on user "mousedown" events during the capture phase. For example:
    /*
    	WARNING ~ WARNING ~ WARNING
    
    	This code is for illustrative purposes only.  I'm unsure if I would
    	actually recommend using it in production.
    */
    !(function () {
    	// Utility function to help nullify 'click' events.
    	function nullifyClick(evt) {
    		evt.stopPropagation();
    		this.removeEventListener('click', nullifyClick, true);
    	}
    
    	document.addEventListener('mousedown', function (evt) {
    		evt.stopPropagation();
    
    		var tagName = (evt.target.tagName || '').toUpperCase();
    		switch (tagName) {
    		case 'A':
    		case 'BUTTON':
    			// Trigger a 'click' now (during 'mousedown').
    			jQuery(evt.target).trigger('click');
    
    			// Capture and nullify the browser's normal 'click' event.
    			document.addEventListener('click', nullifyClick, true);
    
    			break;
    		}
    	}, true);
    })();
    
  • edited August 2016
    Sure, my code is pretty simple:
    $("#passages").bind("mousedown", function(event){
    	$("#passages")
    	.find('a:hover, button:hover')
    	.trigger("click");
    })
    

    So essentially I bind mousedown to an autoclick on any hover class, and the only hovers on screen will be where the mouse is.

    I find the subsequent click on mouseup to not be an issue, as by the time that happens, the screen has already cleared.
Sign In or Register to comment.