jsBin:
http://jsbin.com/eyARuHI/2/edit?html,css,js,output
Code:
$('#in').on('blur', function(event) {
alert('input: ' + event.type);
});
$('#button').on('click', function(event) {
alert('button: ' + event.type);
});
HTML:
<input id='in' type='text'>
<div id='button'></div>
Issue:
If focus the input and then click on button - click will never be fired.
How to properly handle click event in such cases?
As suggested by #RGraham try following JS. You will be able see that button event get fired every time when you click on it.
$('#in').on('blur', function(event) {
console.log('input: ' + event.type);
});
$('#button').on('click', function(event) {
console.log('button: ' + event.type);
});
you will need stop bubbling events. Try this
$('#button').on('click', function(event) {
alert('button: ' + event.type);
return false;
});
$('#in').on('blur', function(event) {
alert('input: ' + event.type);
});
Related
I am using jquery to select an element how do I add the onmousedown event to it and obtain data from the onmousedown parameter?
This is the code that I so far have.
$("#" + that.id).addEventListener(onmousedown(event), function(d) { alert("Hello")});
try this,
$("#" + that.id).mousedown(function(e) { alert("Hello")});
Without jQuery:
Using .addEventListener (recommended):
document.getElementById(this.id).addEventListener("mousedown", function (event) {
console.log(event);
});
Or, using .onmousedown:
document.getElementById(this.id).onmousedown(function (event) {
console.log(event);
});
With jQuery:
Using .on (recommended):
$("#" + this.id).on("mousedown", function (event) {
console.log(event);
});
Or, using .onmousedown:
$("#" + this.id).onmousedown(function (event) {
console.log(event);
});
I have a div class called 'cat'. In mouseover event another div is displayed with two anchor link on which click event are hard coded. Now when anchor is clicked its parent div click also gets fired. I tried to return galse, but it is not working. The code is as below
function onload()
{
$('.cat').css('cursor', 'pointer');
$('.cat').mouseenter(function (e) {
$('<div />', {
'class': 'tip',
html: 'Name: ' + $(this).data('cat-name') + '<br/>Web Name: ' + $(this).data('web-name') + '<br/>Total No. Of SubCategories: ' + $(this).data('total-subcategory') + '<br/><br/>Add Sub Category Edit Category ',
css: {
position: 'fixed',
top: e.pageY,
left: e.pageX,
border: '1px solid red',
background: 'yellow',
padding: '5px',
font: '8'
}
}).appendTo(this);
});
$('.cat').mouseleave(function (e) {
$('.tip', this).remove();
});
$('.cat').on('click', getsubcategory);
}
function getsubcategory()
{
var clicked = $(this).parent().attr('id');
gatsubcategory(clicked);
return false;
}
function editcategory(catid,e) {
alert("Edit " + catid);
return false;
}
function addsubcategory(catid,e) {
alert("Add " + catid);
return false;
}
You need to use event.stopPropagation() to prevents the event from bubbling in child elements click event(which are anchor tag in your case). something like this:
$('.cat a').click(function(e){
e.stopPropagation();
});
You should use event.stopPropagation for that.
It Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('.cat').mouseleave(function (e) {
e.stopPropagation();
$('.tip', this).remove();
});
Edit
You can also do it in the inline javascript too, just pass event as another parameter like this,
<a onclick="test(event)"></a>
javascript
function test(event)
{
event.stopPropagation();
}
I have to write code which finds all anchors and attaches a function that displays a popup of the elements text. My code is probably a mess, but I was able to get it working however the issue I have now is:
If I click link 1, then link 2, then click link 1 again, it displays link 2's text however if i click it again it displays the correct text.
I am not sure exactly how to rewrite or go about fixing this code to properly display the element which is clicked, text all the time.
here is a jsfiddle example: http://jsfiddle.net/2aLfL/1/
$(document).ready(function() {
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('a').click(function(){
if($(this).hasClass('selected')){
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
var elText = $(this).text();
$('#elPop').html("<p>" + "<br><br>" + "You just clicked: <br><b>" + elText + "</b><br><br><br>" + "Click anywhere to Close" + "</p>");
console.log(this);
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
}
return false;
});
});
$(function close(){
$(document).click(function(){
$('.anchorpop').hide();
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});
You're binding the following click handler
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
inside <a> click handler so whenever a link is clicked, multiple handlers are being added.
You can avoid many unnecessary code using toggleClass() method.
You can also bind same event handlers to multiple elements by passing additional selectors.
after all your code boils down to
$(function () {
$('a').click(function () {
var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
$('.pop').html(htmlString).slideFadeToggle(function () {
$(this).toggleClass('selected');
});
return false;
});
$("#closeWin, .anchorpop").click(function () {
$('.anchorpop').hide();
});
});
and the custome slideFadeToggle function.
Updated Fiddle
Fiddle here: http://jsfiddle.net/mBBJM/3743/
Javascript in question:
$('div').on('mouseenter touchstart touchenter', function(event) {
console.log('Entered ' + $(this).attr('class') + ' by ' +
event.type);
})
What I'm having trouble accomplishing:
Trigger all 4 divs in one 'movement' on a touch device
I have an element that I grab the content of and swap for an input, I then want to user to be able to click on the input (to enter text as normal), but if they click anywhere else to swap it back to the text.
However the click event seems to fire even the very first time the user clicks anywhere on the page. My code is below, have I misunderstood something?
$(document).ready(function(){
$("#thingy").css('cursor', 'pointer');
$("#thingy").one("click", function() {
var element = $(this);
element.css('cursor', 'auto');
element.css('display', 'inline-block');
element.fadeOut(100, function(){element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">')}).fadeIn(100);
$("#thingy").click(function() {
return false;
});
$(document).click(function() {
alert("You clicked off the text-box");
element.html(element.children('input:text').val());
});
});
});
The reason it alerts even the first time is the first click handler (the .one() doesn't itself return false; or .stopPropgaton(), like this:
$(document).ready(function(){
$("#thingy").css('cursor', 'pointer');
$("#thingy").one("click", function() {
var element = $(this);
element.css('cursor', 'auto');
element.css('display', 'inline-block');
element.fadeOut(100, function(){element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">')}).fadeIn(100);
$("#thingy").click(function() {
return false;
});
$(document).click(function() {
alert("You clicked off the text-box");
element.html(element.children('input:text').val());
});
return false;
});
});
You can test it out here.
A better approach would be to use the blur event instead, replacing this:
$("#thingy").click(function() {
return false;
});
$(document).click(function() {
alert("You clicked off the text-box");
element.html(element.children('input:text').val());
});
return false;
With this:
$(element).delegate("input", "blur", function() {
element.html(element.children('input:text').val());
});
You can try that version here.