I need to catch the click (or hide) event of a alertify.js event. I set up the time to 0 in order to wait to the user for click in the message. Is there any way to attach a function to this event?
<link rel="stylesheet" href="alertify.js-0.3.11/themes/alertify.core.css" />
<link rel="stylesheet" href="jalertify.js-0.3.11/themes/alertify.default.css" id="toggleCSS" />
<script src="alertify.js-0.3.11/lib/alertify.min.js"></script>
<script>
alertify.log('test','',0);
</script>
You can attach an event to the document, and see if the element clicked on has a class that matches the class names attached to alertify logs (alertify-log).
For example, you could use code like this:
document.body.addEventListener('click', function (e) {
if(e.target.className.indexOf('alertify-log') > -1) {
console.log('Clicked on a log');
}
}, false);
Demo
Try
alertify.log('test',function(){
//function here
});
Related
I have this piece of code
window.onload = function () {
$('#btnFilter').click(function (e) {
btnFilter(e);
});
}
The function works on button click but I need that the button is clicked when the page opens. I've tried things like $('#btnFilter').trigger( "click" ); but the button still not clicked on page opening. How can I achieve this thing? I can't just call the function because I get the error "Cannot read property 'currentTarget' of undefined" beacuse I don't give any event as parameter.
function btnFilter(e) {
element = e.currentTarget.parentElement;
//other code
}
You can try like this:
$(document).ready(function(){
$('#btnFilter').trigger('click');
});
$(document).on('click','#btnFilter',function(e){
btnFilter(e);
});
function btnFilter(e)
{
element = e.currentTarget.parentElement;
}
You can change your 'btnFilter' to accept the button instead of the event:
function btnFilter(element) {
element = element.parentElement;
...
}
$(function() {
$("#btnFilter").click(function(e) { btnFilter(this); return false; });
// Pass the button to the filter operation on load
btnFilter($("#btnFilter")[0]);
});
alternatively, accept the parent element directly
$(function() {
$("#btnFilter").click(function(e) { btnFilter(this.parentElement); return false; });
// Pass the button parent to the filter operation on load
btnFilter($("#btnFilter")[0].parentElement);
});
If you use jquery i would keep it coherent and not mix it with vanilla javascript. A Jquery solution is:
$(document).on("click", "#btnFilter", btnFilter);
$(document).ready(function(){$("#btnFilter").click()});
or
$(document).on("click", "#btnFilter", btnFilter);
$(document).ready(btnFilter);
In you solution the error is the event binding: when you bind the event to #btnFilter on page load, the element is not existing yet, so the function cannot be triggered.
jQuery Solution:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").trigger("click");
});
</script>
</head>
<body>
<button onclick="alert('clicked')">Click</button>
</body>
</html>
I started using Brave today and noticed some of my web apps / websites are not working. Specifically, some buttons are not getting handled. So, to troubleshoot, I added an IIFE with a window click handler to log this.id. Brave console says undefined however the html button element clearly has the id attribute defined? Am I missing something, or is Brave not fully baked yet?
(function() {
console.log('IIFE Fired.');
window.addEventListener("click", clickHandler);
function clickHandler() {
console.log(this.id);
}
}());
<head>
<link href='//fonts.googleapis.com/css?family=Roboto:400,700,100,300,700italic,500,500italic,400italic,300italic,100italic|Roboto+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.grey-deep_orange.min.css" />
</head>
<body>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save">
Save
</button>
<script src="//code.getmdl.io/1.2.1/material.min.js"></script>
</body>
(function() {
console.log('IIFE Fired.');
window.addEventListener("click", clickHandler);
function clickHandler() {
console.log(this.id);
}
}());
This is completely expected. In an event listener, this is the current event target. That is, it's the node to which you added the event listener. In this case, it's window. And it doesn't have an id.
window.addEventListener("click", function() {
console.log(this === window); // true
});
<button>Save</button>
You should either not delegate the event and add the event listener to the button, or use the event target.
window.addEventListener("click", function(e) {
console.log(e.target.id);
});
<button id="credential-save">Save</button>
You have assigned event listener to window. I think, when it would be assigned to button, its id will be log. This your html.
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save">
Save
</button>
And this js
(function() {
console.log('IIFE Fired.');
var button = document.querySelector('button');
button.addEventListener("click", clickHandler);
function clickHandler() {
console.log(this.id);
}
}());
I have one js function,say check(val). I call it on click event on body and one tag. When I click on body it correctly shows id of body element. But,when when I click on , it shows ids of both and body!
I just want to display id of on click and on body's click event some other action to be executed.
My sample HTML code:
<body id="body" onclick="check(this.id);">
<a href="#" id="ele" onclick="check(this.id)">Hello</div>
</body>
JS Code :
function check(val)
{
if(val=="ele"){
alert("element is clicked");
}else if(val=="body"){
alert("Body is clicked");
}
}
you need to stop Propagation of event using event.stopPropagation() method. already #StephenThomas mentioned this in comment of your question.
try this,
HTML markup:
<body id="body" onclick="check(event,this.id);">
<a href="#" id="ele" onclick="check(event,this.id)">Hello</div>
</body>
javascript code:
function check(event, val) {
if (val == "ele") {
alert("element is clicked");
event.stopPropagation(); //here we stop propagation of the event
} else if (val == "body") {
alert("Body is clicked");
}
}
SEE THIS DEMO.
I hope this would help you...
Every browser handles event bubbling differently. Some will show both and some will only show the link. You can change the function to fit every clicked element:
function check(val)
{
alert("Clicked element type is: " + val.nodeName);
}
This way you don't need any id detection because you check the type of the node itself.
You are getting both ids because when you click on the anchor you are also clicking on the body since the anchor is a child of the body element.
important note:when you click on the anchor you are also clicking on the body
use like this
<body id="body" onclick="check(this);">
Hello
</body>
Javascript
function check(val)
{
if(val.id.toString()=="ele"){
alert("element is clicked");
}else if(val.id.toString()=="body"){
alert("Body is clicked");
}
}
I'm trying to wrap a button using polymer.
HTML:
<polymer-element name="sp-button" attributes="active">
<template>
<link rel="stylesheet" href="sp-button.css">
<button type="button"><content></content></button>
</template>
<script src="sp-button.js"></script>
</polymer-element>
JS:
Polymer('sp-button', {
active: false,
activeChanged: function() {
console.log('active ' + this.active);
}
});
I'm not sure how to allow user of that polymer element to listen to click events or hover events.
Also, in the case where two buttons are wrapped in that polymer element.
Users of your element can setup listeners like any normal HTML elements:
var button = document.querySelector('sp-button');
button.addEventListener('click', function(e) {
alert('from outside');
});
In a polymer-element, you can also capture the click event on the button using on-click, do something interesting with it, and/or fire another event:
<button on-click="clickHandler"><content>Button text</content></button>
...
clickHandler: function(e, detail, sender) {
alert('from inside');
this.fire('insideclick', {msg: 'from inside'});
}
Full demo: http://jsbin.com/uqubAGO/1/edit
The two-button case would look something like this:
<polymer-element name="sp-button" attributes="active">
<template>
<link rel="stylesheet" href="sp-button.css">
<button type="button" on-click="onSendClick">Send</button>
<button type="button" on-click="onReceiveClick">Receive</button>
</template>
<script src="sp-button.js"></script>
</polymer-element>
JS:
Polymer('sp-button', {
//...
onSendClick: function() {
this.fire('send');
},
onReceiveClick: function() {
this.fire('receive');
}
});
And then you could listen for those domain-specific events from the outside using addEventListener:
var button = document.querySelector('sp-button');
button.addEventListener('send', function(e) {
//...
});
button.addEventListener('receive', function(e) {
//...
});
The benefit to this method is that it hides away the implementation detail that the user clicked a button to cause the send event to occur. As far as the user of the sp-button element is concerned, it could have been a button click, a dropdown selection, a mouse hover, or any number of things that caused it. All the user cares about is your public API: that your element will fire a send event and a receive event when it wants the outside world to take those respective actions.
You'd probably want to stop the propagation of the click event if you were going to catch it and dispatch something new.
I have a text input that I would like to, when it has focus, register a click event anywhere on the body. But when focus is removed from it, that click event is removed from the body. Sadly, I seem not to be able to suss it.
$(document).ready(function () {
$("html").on("focus", "#asdf", function () {
$("body").on("click", "*:not(#asdf)", wasItClicked);
});
$("html").on("blur", "#asdf", function () {
$("body").off("click", "*", wasItClicked);
});
});
function wasItClicked() {
alert("yeah");
}
BIN
Thanks for any help.
When #asdf is focused, and some other element is clicked, The events fire in order mousedown, blur, mouseup, click. So the handler has been removed before click fires.
The mousedown event fires before blur. If you are OK with mousedown instead of click, you could use this:
$(document).ready(function () {
$("#asdf").on("focus", function () {
$("body").on("mousedown", wasItClicked);
});
$("#asdf").on("blur", function () {
$("body").off("mousedown", wasItClicked);
});
});
(bin)
Edit:
You could use the mousedown event to help determine if you are losing focus because of a click, and remove the handler in the click handler if have lost focus.
$(document).ready(function () {
$("#asdf").on("focus",function() {
$("body").on("mousedown", setDown);
$("body").on("click", wasItClicked);
});
$("#asdf").on("blur", function() {
if ($(this).attr("mouse") != "down") {
$("body").off("mousedown", setDown);
$("body").off("click", wasItClicked);
}
});
});
function setDown() {
$("#asdf").attr("mouse","down");
}
function wasItClicked() {
if ($("#asdf") != $(document.activeElement)) {
$("body").off("mousedown", setDown);
$("body").off("click", wasItClicked);
}
$("#asdf").attr("mouse","up");
alert("yeah");
}
new bin
You could use setTimeout to remove the click and use namespaces when adding and removing events because you may accidentally remove another click handler but the simplest way would be to remove the click event in the handler:
...
$("body").on("click.fromasf", "*:not(#asdf)", wasItClicked);
...
function wasItClicked() {
$("body").off("click.fromasf");
console.log("yeah");
}
Here is an example using timeout:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.0.js"></script>
<style>
</style>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
<body>
<input type="text" id="asdf" />
<input type="text" id="Text1" />
<script>
$(document).ready(function () {
$("html").on("focus", "#asdf", function () {
console.log("adding click handler");
$("body").on("click.fromasf", "*:not(#asdf)", wasItClicked);
});
$("html").on("blur", "#asdf", function () {
setTimeout(function () {
console.log("remove click");
$("body").off("click.fromasf");
}, 500);
});
});
function wasItClicked() {
console.log("yeah");
}
</script>
</body>
</html>
Ok, I see a couple of issues...
You're delegating a focus event to the HTML element for an event on
a single element... That's a bit of overkill, so I would put the
focus and blur events directly on the input
When you call off, you need to pass it the exact same selector in the second parameter
Your click event is delegated to the body, and firing on any child element that is clicked and matches the selector - this does not include the body itself... not sure if you wanted it that way, but I moved it up to the html element, to include the body
As soon as the input loses focus, the event will be removed, so the clicks won't register (You can use a timeout as #HMR suggested in their answer)
I had some problems with the delegation on the html element that was still returning the input (despite the :not(#asdf) selector) so I just put the filter into the function.
Here is the revised code (testing version):
var click_selector = ":not(#asdf)";
var click_target = 'html';
$(document).ready(function () {
$("#asdf").on("focus", function () {
$(click_target).on("click", click_selector, wasItClicked);
});
$("#asdf").on("blur", function () {
// Use timeout to be able to register the click before function is removed
// NOTE that since 'click' fires when the mouse is released, if they
// hold the mouse down for a while, the event will be gone and won't
// register. Maybe better to use 'mousedown' instead of 'click'
// in which case the timeout could probably be reduced to 10ms or something
// Also, using timeouts creates the possibility of multiple click handlers
// present at the same time (new one added before the previous is removed)
setTimeout( function(){
$(click_target).off("click", click_selector, wasItClicked);
}, 100);
});
});
function wasItClicked(e) {
e.stopPropagation();
e.preventDefault();
if( e.target.id !== 'asdf' ){
console.log('yeah', click_target, click_selector);
}
}