hammer.js can't handle / set tap and doubletap on same elements

hammer.js can't handle / set tap and doubletap on same elements - javascript

when use the hammer.js default 'doubletap'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style media="screen">
.box {
width: 400px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/hammer.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var myElement = document.querySelector('.box')
var hammer = new Hammer(myElement)
hammer.on('doubletap', function (e) {
console.log(e.type)
}).on('tap', function (e) {
console.log(e.type)
})
})
</script>
</body>
</html>
when I double tap, it print 'tap' twice, and 'doubletap' once, but I want it just print 'doubletap', don't fire the 'tap'.
I try requreFailure http://hammerjs.github.io/require-failure/ and Hammer.js : How to handle / set tap and doubletap on same elements
so I write this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style media="screen">
.box {
width: 400px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/hammer.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var myElement = document.querySelector('.box')
var hammer = new Hammer(myElement)
var singleTap = new Hammer.Tap({ event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
hammer.add([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure([doubleTap]);
hammer.on('doubletap', function (e) {
console.log(e.type)
}).on('singletap', function (e) {
console.log(e.type)
})
})
</script>
</body>
</html>
But it doesn't console.log anything(even error message), it's really weird. The hammer's version is 2.0.8. sorry for my poor English, hope that's clear.

Try using
var hammer = new Hammer.Manager(myElement);
instead of
hammer = new Hammer(myElement).
Ciao.

try this code:
var timeInMs = 0;
hammer.on('tap', function(e) {
if((Date.now()-timeInMs)<300){
//doubleTap
}else{
//tap
}
timeInMs = Date.now();
});

Related

can't select element with dom, after creating that element with other function - appendChild

How i'm supposed to select my element that have been created by function. First function is working well, but while i'm trying to select the element that been created in that function, it doesn't work
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
});
document.querySelector("p").addEventListener("click", function () {
console.log("Hi");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
<script src="script.js"></script>
</body>
</html>

That's because you are attempting to attach a click event to your paragraph tag before its ever been added to the DOM.
You will need to move this new event listener inside of your onclick and after you append it to your .body div.
Example:
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
document.querySelector("p").addEventListener("click", function () {
console.log("Hi");
});
});
As requested, here is how you could just split some of this out to be its own methods for clarity. Feel free to use your own style as its just an example:
const onClickLop = (e) => {
const el = document.createElement("p");
const bodyDiv = document.querySelector(".body");
el.appendChild(document.createTextNode("lopas"));
bodyDiv.appendChild(el);
el.addEventListener("click", onClickLopas);
};
const onClickLopas = (e) => {
console.log("Hi");
});
document.querySelector(".lop").addEventListener("click", onClickLop);

Problem:
You create the p element at the moment when you click on .lop
You try to add the event listener at the page load. At this point there is no p tag at all.
Solution:
Add the event listener after you created the p tag.
You could also use the reference c instead of querySelector.
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function() {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
c.addEventListener("click", function() {
console.log("Hi");
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
</body>
</html>

The code to add the event listener for the p element is executing before your code that creates it. Move the event handler into the first function so that it isn't triggered until the element is created and added to the document. However, that will mean that each time you click the first element, a new p will be created with its own handler (separate question/answer).
Also, by doing that you can consolidate some code.
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
c.addEventListener("click", function () {
console.log("Hi");
});
body.appendChild(c);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
<script src="script.js"></script>
</body>
</html>

Click on element and stopPropagation() for another one

I have two events: A button event and a container event. I want to apply stopPropagation() for container function, when I click on button. How to do this in vanilla js?
Now when I click on button #btn two functions will called. My goal is, when I click on button #btn, the code for #btn should only run. Click on div with id #container shall do it the same.
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
console.log('click on btn')
})
const container = document.getElementById('container');
container.addEventListener('click', ()=> {
console.log('click on container')
})
#container {
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<div id="container">
<button id="btn">click</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

You can use Element.closest() to detect click outside or inside specific element
check this example
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
console.log('click on btn')
})
const container = document.getElementById('container');
container.addEventListener('click', (e)=> {
if(!e.target.closest('#btn')){
console.log('click on container')
}
})
#container {
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<div id="container">
<button id="btn">click</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

Simply add event.stopPropagation in your btn click handler
btn.addEventListener('click', ()=> {
console.log('click on btn')
event.stopPropagation()
})

display window size using javascript

I'm trying to display the window size, whenever I resize my window. but I'm not able to until I refresh the window, I want to see the window size on the fly while I'm resizing the window.
window.onload = init();
window.onresize = init();
function init() {
var status = document.querySelector("#pagesize");
status.innerHTML = "" + window.innerHeight + " " + window.innerWidth;
}
#pagesize {
border: 1px solid red;
padding: 2px;
color: red;
}
html code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>window resize</title>
</head>
<body>
<p>PAGE WINDOW SIZE <span id="pagesize">NOT LOADED YET</span></p>
<script src="script.js"></script>
</body>
</html>

You need to add a reference to the function to the event handler. Or even better use addEventListener() so you don't overwrite existing handlers. You stored the result of the init() function in the event handler.
window.onload = init;
window.onresize = init;
/* or better use this */
//window.addEventListener('load', init);
//window.addEventListener('resize', init);
function init() {
var status = document.querySelector("#pagesize");
status.innerHTML = "" + window.innerHeight + " " + window.innerWidth;
}
#pagesize {
border: 1px solid red;
padding: 2px;
color: red;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>window resize</title>
</head>
<body>
<p>PAGE WINDOW SIZE <span id="pagesize">NOT LOADED YET</span></p>
<script src="script.js"></script>
</body>

How to toggle event listener on javascript matchmedia

I need to know how can i toggle an event listener that works when the screen is less than 700px and when the screen is more than 700px the event listener gets removed
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("resources").addEventListener("click", function() {
alert("media worked")
})
} else {
document.getElementById("resources").removeEventListener("click", function() {
alert("media worked")
})
}
}
var x = window.matchMedia("(max-width: 979px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
h1 {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="title">abrir y cerrar</h1>
<button id="resources">click to toggle</button>
</body>
</html>

You need to use named functions if you want to use removeEventListener, since the function that you remove has to be the same one you added.
function clickHandler() {
alert("media worked");
}
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("resources").addEventListener("click", clickHandler)
} else {
document.getElementById("resources").removeEventListener("click", clickHandler)
}
}
var x = window.matchMedia("(max-width: 979px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
h1 {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="title">abrir y cerrar</h1>
<button id="resources">click to toggle</button>
</body>
</html>

Barmar has given the correct answer to the problem of your code. But I still wanted to add this to show that it's a possibility.
You could use CSS to, for example, disable a click on an element uing the pointer-events property.
var links = document.querySelectorAll('a');
function onClick(event) {
console.log(event);
event.preventDefault();
}
links.forEach(function(link) {
link.addEventListener('click', onClick);
});
.events-none {
pointer-events: none;
}
Without pointer-events: none
With pointer-events: none

jQuery fadein effect to transfer to another page

I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>

You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>

Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX

Develop Reference

JavaScript is the programming language of the Web.

hammer.js can't handle / set tap and doubletap on same elements - javascript

Try using var hammer = new Hammer.Manager(myElement); instead of hammer = new Hammer(myElement). Ciao.

try this code: var timeInMs = 0; hammer.on('tap', function(e) { if((Date.now()-timeInMs)<300){ //doubleTap }else{ //tap } timeInMs = Date.now(); });

Related

can't select element with dom, after creating that element with other function - appendChild

Click on element and stopPropagation() for another one

display window size using javascript

How to toggle event listener on javascript matchmedia

jQuery fadein effect to transfer to another page

Categories

Resources