Activate click events when button is being held down

Question

Activate click events when button is being held down

I'm currently working on a directive that shifts an element to the right whenever clicked. However, I want the element to keep moving as long as the button is pressed.

.directive("car", function(){
    return {
        restrict:"A",
        link:function(scope,element,attrs,controller){
            var left=0;
            var car = angular.element(element[0].querySelector('.car'));
            var move = function(e){
                left+=10;
                car[0].style.left = left+"px";
            };
            element.on("click", move);
        }
    };
})

My question is how can I continuously detect when the button is being pressed every half second and recall the move function? Is there a way to achieve smooth movement?

Check out an interactive demo here: http://jsfiddle.net/vtortola/2m8vD/

I am unable to use jQuery for this particular task, but I am open to utilizing AngularJS modules like ngTouch or any other alternative.

javascript angularjs angularjs-directive

Answer 1

Answer №1

I created a simple mockup demonstrating a solution to your issue using mouseup and mousedown events along with the $timeout service.

.directive("car", function($timeout){
    return {
        restrict:"A",
        link:function(scope,element,attrs,controller){
            var left=0;
            var car = angular.element(element[0].querySelector('.car'));
            var timeout;
            var moveOnce= function() {
                left+=10;
                car[0].style.left = left+"px";
            };
            var move = function(e){
                $timeout.cancel(timeout);
                timeout = $timeout(function(){
                    moveALittle();
                    move();
                }, 250);
            };
            var stop = function(e){
                $timeout.cancel(timeout);
            };
            element.on("click", moveOnce);
            element.on("mousedown", move);
            element.on("mouseup", stop);

            element.on("$destroy",function(){
                element.off("click",moveOnce);
                element.off("mousedown", move);
                element.off("mouseup", stop);
            });
        }
    };
})

Check out the updated demo here: http://jsfiddle.net/2m8vD/12/

You can easily adjust the timeout delay and pixel movement for smoother motion according to your preference.

Instead of using mouseup and mousedown events, you can also utilize Angular directives ng-mouseup and ng-mousedown directly bound to the button element.

<button ng-mousedown="move" ng-mouseup="stop">Move</button>

UPDATE:
Introduced moveOnce() function for single-click functionality.

Answer 2

I created a simple mockup demonstrating a solution to your issue using mouseup and mousedown events along with the $timeout service.

.directive("car", function($timeout){
    return {
        restrict:"A",
        link:function(scope,element,attrs,controller){
            var left=0;
            var car = angular.element(element[0].querySelector('.car'));
            var timeout;
            var moveOnce= function() {
                left+=10;
                car[0].style.left = left+"px";
            };
            var move = function(e){
                $timeout.cancel(timeout);
                timeout = $timeout(function(){
                    moveALittle();
                    move();
                }, 250);
            };
            var stop = function(e){
                $timeout.cancel(timeout);
            };
            element.on("click", moveOnce);
            element.on("mousedown", move);
            element.on("mouseup", stop);

            element.on("$destroy",function(){
                element.off("click",moveOnce);
                element.off("mousedown", move);
                element.off("mouseup", stop);
            });
        }
    };
})

Check out the updated demo here: http://jsfiddle.net/2m8vD/12/

You can easily adjust the timeout delay and pixel movement for smoother motion according to your preference.

Instead of using mouseup and mousedown events, you can also utilize Angular directives ng-mouseup and ng-mousedown directly bound to the button element.

<button ng-mousedown="move" ng-mouseup="stop">Move</button>

UPDATE:
Introduced moveOnce() function for single-click functionality.

Answer 3

Answer №2

@Aaronias pointed me in the right direction, big thanks to him.

I successfully achieved fluid movement while holding down the button and made it cancellable when the mouse moves out. The key was eliminating the CSS transition, initiating an interval for incremental steps, and stopping that interval on mouseout or mouseup events.

var move = function(e){
    if(interval)
        return;

    step(e);
    mustStop = false;

    interval = $interval(function(){
        step(e);
        if(mustStop){
            $interval.cancel(interval);
            mustStop = false;
            interval = null;
        }
    }, 10);
};

var stop = function(){ mustStop= true;};

right.on("mousedown", move)
    .on("mouseup", stop)
    .on("mouseout", stop);

left.on("mousedown", move)
    .on("mouseup", stop)
    .on("mouseout", stop);

Here is the working version of the example: http://jsfiddle.net/vtortola/2m8vD/22/

Answer 4

@Aaronias pointed me in the right direction, big thanks to him.

I successfully achieved fluid movement while holding down the button and made it cancellable when the mouse moves out. The key was eliminating the CSS transition, initiating an interval for incremental steps, and stopping that interval on mouseout or mouseup events.

var move = function(e){
    if(interval)
        return;

    step(e);
    mustStop = false;

    interval = $interval(function(){
        step(e);
        if(mustStop){
            $interval.cancel(interval);
            mustStop = false;
            interval = null;
        }
    }, 10);
};

var stop = function(){ mustStop= true;};

right.on("mousedown", move)
    .on("mouseup", stop)
    .on("mouseout", stop);

left.on("mousedown", move)
    .on("mouseup", stop)
    .on("mouseout", stop);

Here is the working version of the example: http://jsfiddle.net/vtortola/2m8vD/22/

Activate click events when button is being held down

Answer №1

Answer №2

Similar questions

ReactJS Application: Issue with Selective Mobile Scrolling

Bower downloads the identical package but arranges it in a distinct file structure

Is there a way to verify HTML binding prior to setting up an AngularJS directive?

What sets apart the use of `function(){}.bind(this)` and `angular.bind(this, function() {})`

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

Analyzing critical code paths for optimal performance

Initializing ng-app with a specific name will prevent the initialization of variables

Tips for converting an object into parameters for ng-include

How can the vertical scroll bar position be reset in Material-Table when pagination is activated?

Enhance your JavaScript code by replacing Promise syntax with Async syntax and utilizing map() instead of a traditional For

Challenges encountered with the "load" event handler when creating a Firefox Extension

While Ajax POST is functional on desktop, it does not seem to work on Phonegap applications or Android

Retrieving specific data from nested arrays in Vue.js

Setting up user roles using Firebase Auth in NextJS application

Having trouble finding the element during Selenium JavaScript testing

Using the DatePicker component with non-escaped Latin alphabet characters in date-fns for ReactJS

Auto Suggest: How can I display all the attributes from a JSON object in the options list using material-ui (@mui) and emphasize the corresponding text in the selected option?

Can a variable be declared within the path references of the Firebase database?

Livereload in Gulp fails to automatically restart the server

Create a time of 00:19:59 using JavaScript