In the website pages we browse, there are generally various buttons. After selecting them, they will display various effects. How to obtain and detect whether the button in the website page is pressed in the js code? Woolen cloth?
If the code on the website page is like this:
<button id="btn">Button 1</button>
Then to detect the button press, you need to cooperate with the js code:
Pure js implementation:
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
//handler for click event.....
alert("pressed");
}
</script>
The above method uses the getElementById method in the HTML DOM to find the element whose id is btn to detect the click event.
Method 2. Encapsulate the event that needs to be executed as a function
<script type="text/javascript">
function btan(){
alert("action to be performed");
}
</script>
Write the newly created function directly into the onClick click event of the html tag.
<button onClick="btan();">Button 2</button>
The advantage of this is that there is no need to find the html element to directly execute the action function that needs to be executed for the click.
Method 3: The click event of the jquery plug-in, the code integrated in the jquery plug-in uses the click method of the element to detect the button press state.
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
console.log("1 was clicked");
});
});
</script>
The above code can only monitor one click, so how to detect if it is a double click?
js code:
<script type="text/javascript">
document.getElementById('btn').ondblclick = function(){
console.log("Clicked 2");
}
</script>
jquery code:
<script type="text/javascript">
$("#btn").dblclick(function(){
// Statement to be executed after double click
});
</script>
In some cases, the problem of double-clicking the button also triggers the click event of the element, so how can we remove the redundant click event?
<script type="text/javascript">
var djds = null;
document.getElementById("btn").onclick = function () {
clearTimeout(djds);
djds = setTimeout(function(){
//click action
},300);
};
document.getElementById('btn').ondblclick = function(){
// Cancel the method that was not executed last time
clearTimeout(djds);
// double click action
};
</script>
Through a setTimeout timer combined with clearTimeout, the click event is delayed to distinguish the single click and double click.
The method of jquery is the same:
<script type="text/javascript">
var djds = null;
//Define the setTimeout execution method
$('btn').click(function () {
// Cancel the method that was not executed by the last delay
clearTimeout(djds);
//execute delay
djds = setTimeout(function(){
//Click the statement to execute
},300);
});
$('btn').dblclick(functin() {
clearTimeout(djds);
//Double-click the executed code or create jump code
});
</script>
What if we need to implement that the button can only be clicked once?
$('#btn').bind('click', function() {
$(this).unbind('click');//Unbind click event
});
What should I do if I want to implement two clicks to perform different actions?
In versions before jquery 1.9 we can use the toggle method
Such as:
$("btn").toggle(function(){
//action 1
},function(){
//action 2
});
In versions after 1.9, there is no toggle method, we can set it like this
var nun=0;
$('xxxx').bind("click", function() {
nun++ % 2 ?
(function() { alert("action 1 performed"); }()) :
(function() { alert("Execute action 2"); }());
});
Use the value of the defined num variable to take the remainder to determine the action to execute.