This is my html code
< button class="send-report" name="submit" id="submit" type="submit" onclick="reportfeed()">Send Report< /button>
On the first click the keyboard disappeared, the 'reportfeed' function works only in the second click (in ipad)
function reportfeed()
{
alert(1);
}
I can use the code below, Please help me if you know any other method
jQuery(".send-report").bind("click touchstart", function(){
reportfeed();
});
Define a clickhandler that you can use later on:
var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
$(".send-report").bind(clickHandler, function(e) {
alert("clicked or tapped. This button used: " + clickHandler);
});
This will trigger click on non-touch devices and touchstart on touch devices.
Use .on() because .bind() will be removed from future scripts,I think.
Try this
$(".send-report").on('touchstart click', function(){
reportfeed();
});
You could use .stopPropagation() to stop multiple events being fired. Also, if you want to do specific stuff for different event types use e.type
$('.send-report').on('touchstart click', function(e) {
e.stopPropagation(); //stops propagation
if(e.type == "touchstart") {
// Handle touchstart event.
} else if(e.type == "click") {
// Handle click event.
}
});
Related
all
Now I defined a change click for checkbox,when chexkbox checked,I will show a tips,I also defined click in my HTML ,when I click everywhere,I will hide a tips,but my problem is When I checked the checkbox,the tips is not show in IE,I
through debugger，I find the Body click is Trigger，is it a Bubbling events？I try write
window.event ? window.event.cancelBubble = true : e.stopPropagation();
,but it is not work,body click still Trigger in IE,in Google isn’t have this problem,how to deal with it?
$(document).on("change", ".checked", function (self) {
$(".circle_bot").show();
window.event ? window.event.cancelBubble = true : e.stopPropagation();
}
$("body").click(function () {
$(".circle_bot").hide();
});
<body>
...
<div class="circle_bot"></div>
...
<input type="checkbox" class="checked"/>
</body>
I want to only trigger check click，isn't trigger body click when chenced the checkbox.
You can check what target of click was and do something like:
$("body").click(function(event) {
// don't do anything if checkbox clicked
if (!$(event.target).is('.checked')) {
$(".circle_bot").hide();
}
});
note that jQuery provides event object in all event handlers so you don't have to see if window.event is available, it is done for you
I wanted to get a fuller understanding of how Javascript handles events. click() triggers a div to pop up, but once that div is closed it doesn't respond to the event again.
What is a good way to keep this event loop going?
$project.click(function() {
$popup = $(".popup");
$np.hide();
$popup.append($html);
// EXIT THE POPUP
$(document).bind('keydown',function(e) {
if (e.which == 27) {
$popup.hide();
$np.show("slow");
}
});
$(".exitbutton").click(function() {
$popup.hide();
$np.show("slow");
});
});
If .popup element is set to display:none at page load, can try using .toggle() at $project click handler. Also defined $popup , moved keydown event to outside of click handler, where appears to be added as event handler at each click of $project
var $popup = $(".popup");
$project.click(function() {
$np.toggle();
$popup.append($html).toggle();
});
// EXIT THE POPUP
$(document).bind("keydown",function(e) {
if (e.which == 27) {
$popup.hide();
$np.show("slow");
}
});
$(".exitbutton").click(function() {
$popup.hide();
$np.show("slow");
});
I'm having troubles with the .bind() and .unbind() features. When the button is clicked, it's supposed to change the color of the box. During this time, the button is disabled by unbinding the click function. However, I'm having issues rebinding the click when the css transition completes.
What I have so far is:
$('button').on('click', function(){
$('button').unbind('click');
$('.box').toggleClass('color');
$('.box').one('webkitTransitionEnd transitionend', function(e){
console.log('transition ended')
$('button').bind('click')
});
});
http://jsfiddle.net/t6xEf/
You need to pass the click handler when binding it. So create a function reference then use it while binding the handler.
function click() {
$('button').off('click.transition');
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').on('click.transition', click)
});
$('button').on('click.transition', click);
Demo: Fiddle
Also look at the usage of namespaces while registering/removing the handler because if there if some other click handler added to the button we don't want to disturb it
Also do not add a event handler inside another one
Also have a look at .one()
function click() {
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').one('click.transition', click)
});
$('button').one('click.transition', click);
Demo: Fiddle
I would use a flag instead of binding/rebinding the event handler:
var animating = false;
$('button').on('click', function() {
if (animating) return;
animating = true;
$('.box').toggleClass('color')
.on('webkitTransitionEnd transitionend', function(e) {
animating = false;
});
});
http://jsfiddle.net/t6xEf/1/
Do not unbind. Use a boolean:
var onTrans = false;
$('button').on('click', toggle);
function toggle() {
if (!onTrans){
$('.box').toggleClass('color');
onTrans = true;
$('.box').on('webkitTransitionEnd transitionend', function (e) {
onTrans = false;
});
}
}
http://jsfiddle.net/jp8Vy/
This is surely not what you want to do. It seems overly complex, and I can't imagine a good use case scenario.
That being said, you need to reattach the functionality to be performed in the final bind statement. You call the function to bind to the click event, but don't tell the function what to attach.
You need something like this:
$('button').bind('click', function() { ... });
However, that probably isn't what you really want. It sounds like you just want to set the button's "disabled" attribute to false, then to true after the animation.
How can I tell if a function being called originated from a click event?
For instance, an anchor or button is clicked and the event is captured and a function is called.
Inside of this function in firebug's stack trace I can see an Object like this
Object { originalEvent=Event click, type="click", timeStamp=97128874, more...}
It says the originalEvent came from a click.
Depending on whether it came from or click or not, processing occurs differently.
Is there a way to tell if the function being called originated from a click event?
Any function that is triggered with an event is sent an event object. Call .type on this object and it will return which event it is. Here is a simple example from the jQuery docs:
$( "a" ).click(function( event ) {
alert( event.type ); // "click"
});
So lets say you want to listen for both clicks and typing in a text input:
$( "input" ).on("click keyup", eventHandler);
But you want to do something special on a click:
eventHandler = function(event){
if (event.type === 'click'){
// code to execute if there is a click
} else {
// code to execute if there is a non-click event
}
// code to execute for both click and non-click events
};
That would be the event.type
var elem = document.getElementById('test');
elem.addEventListener('click', function(event) {
console.log(event.type)
}, false);
FIDDLE
or in jQuery
$('#test').on('click paste mouseenter', function(event) {
console.log(event.type)
});
FIDDLE
See it:
DEMO
$('div').click(test);
function test(e){
if(e && e.type === 'click')
alert('called from click!');
else alert('NOT called from click!');
}
test();
demo
function myFn( evt ){
console.log( evt.type );
}
$('div').on('click mouseenter mouseleave', myFn);
I want to trigger click event on a element when mousedown occurs. Also, I want to enable this feature for all elements in a html page.
Is it possible with jQuery on Chrome ?
Here's my first attempt;
$.fn.mousedown = function (onclick) {
this.bind("click", function (e) { onclick.call(this, e); });
return this;
};
But this mousedown elements fired after click occurs.
$(document).on('mousedown', function (e) { $(e.target).trigger('click') })
I'm not sure though for what this should be useful.
To prevent the second click (which is the normal click) you have to do some extra work
$(document).on('mousedown', function (e) {
$(e.target).trigger('click').once('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
})