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

Using Angularjs to bind an array element within an ng-repeat inside a directive

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

Tips for getting the setInterval function to work with a progress bar even when a tab is not in focus

What are the steps to position this bootstrap drop-down menu above a fixed page header?

The value returned by $(this).next() is undefined

Make sure to remain in the same division area when refreshing the page

Bookmarklet does not successfully inject jQuery on a specific webpage

Is there a way to determine if the browser window is currently in use?

Retrieve all string values from an Angular POST request using Express

Rendering a ImageBitMap/Image on an OffScreenCanvas using a web-worker

Working with Vue.js: Utilizing computed properties to iterate through a JSON data structure and generate a new

Tips for updating state in response to changes in props

Node.js is throwing an error "Unexpected token v in JSON at position 0" which

What makes Nuxt/auth so highly secure?

Upon clicking on a different div, a div will elegantly slide down from above the footer

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

ReactJS Enhancements: Additional Selection Feature

The term 'Buffer' is not recognized in the context of react-native

Looking to retrieve the text content of an element using jQuery?

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another