Repeat button in EJ2 JavaScript Button control

10 May 20236 minutes 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.

ej.base.enableRipple(true);

var button = new ej.buttons.Button({cssClass: `e-small`}, '#button');
var clear = new ej.buttons.Button({cssClass: `e-small`}, '#clear');
var timeout = null;

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

document.getElementById('button').addEventListener("mousedown", mouseDownHandler);
document.getElementById('button').addEventListener("mouseup", mouseUpHandler);

function mouseUpHandler(event) {
    clearInterval(timeout);
}

function mouseDownHandler(event) {
    if (event.which === 1) {
        appendSpanElement('Button click event called<hr>');
        timeout = setInterval(clickEventHandler, 200);
    }
}
function clickEventHandler() {
    ej.base.EventHandler.trigger(button.element, "click");
    appendSpanElement('Button click event called<hr>');
}
function appendSpanElement(text) {
    var span = document.createElement('span');
    span.innerHTML = text;
    var log = document.getElementById('eventlog');
    log.insertBefore(span, log.firstChild);
}
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
<!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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <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>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#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;
}