JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Repeat Button in JavaScript Button control

23 Mar 2023 / 1 minute to read

The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state.

The following example explains about how to achieve Repeat Button in mouse and touch events.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { Button } from '@syncfusion/ej2-buttons';
import { EventHandler, enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let timeout: any = null;
let button: Button = new Button({ cssClass: 'e-small' });
button.appendTo('#button');

let clear: Button = new Button({ cssClass: 'e-small'});
clear.appendTo('#clear');

clear.element.onclick = () => {
   document.getElementById('eventlog').innerHTML = '';
}

button.element.addEventListener("mousedown", mouseDownHandler);
button.element.addEventListener("touchstart", mouseDownHandler);
button.element.addEventListener("mouseup", mouseUpHandler);
button.element.addEventListener("touchend", mouseUpHandler);
button.element.addEventListener("click", clickEventHandler);

function mouseUpHandler(event: any): void {
    clearInterval(timeout);
}

function mouseDownHandler(event: any): void {
    event.preventDefault();
    timeout = setInterval(clickEventHandler, 200);
}
function clickEventHandler() {
    EventHandler.trigger(button.element, "click");
    appendSpanElement('Button click event triggered.<hr>');
}
function appendSpanElement(text: string): void {
    let span: HTMLElement = document.createElement('span');
    span.innerHTML = text;
    let log: HTMLElement = document.getElementById('eventlog');
    log.insertBefore(span, log.firstChild);
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='btncontainer'> 
            <button id="button">Button</button>
        </div>
        <div class='event' style="height:auto;">
            <table title='Event Trace' style="width:100%">
            <tbody>
            <tr>
                <th>Event Trace</th>
            </tr>
            <tr>
                <td>
                    <div class="eventarea" style="height: 250px;overflow: auto">
                        <span id="eventlog" style="word-break: normal;"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="evtbtn" style="padding:20px 0 0 20px">
                        <button id='clear' >Clear</button>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
        </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.btncontainer {
  float: left;
  width: 40%;
}

.event {
  float: right;
  width: 60%;
  border-left: 1px solid #D7D7D7;
}

#eventlog b {
  color: #388e3c;
}
    
hr {
   margin: 1px 10px 1px 0px;
   border-top: 1px solid #eee;
}
Previous
Next