How to run a child event only once - javascript

I want to do mouseleave only once after focus triggered. How?
I try several options like off,preventDefault,stopPropagation, return false; but none have worked.
Thank you in advance.
addEvent(date, 'focus', function () {
console.log("focuz" + this.innerHTML);
document.designMode = 'on';
addEvent(swap_date, 'mouseleave', function (e) {
console.log("mouseleave" + this.innerHTML);
//document.designMode = 'on';
$(this).off(e);
e.preventDefault();
e.stopPropagation();
return false;
});
});

fixed in mouseenter event to trigger the check with stop var.
Once mouseleave happends, the stop is on.
addEvent(swap_date, 'mouseenter', function () {
stop = false;
});
addEvent(swap_date, 'focus', function () {
document.designMode = 'on';
if (this.innerHTML != "") {
$(document).ready(function () {
$('.swapDate').bind('mouseleave', function (event) {
if (!stop && this.innerHTML != "")
checkDate(this.innerHTML);
stop = true;
$('.swapDate').unbind('mouseleave');
});
});
}
});

Related

How to stop mouseover and mouseout function after a click event

I have been trying to stop a mouseover and mouseout function after a click event but it does not work:
document.querySelectorAll('.box').forEach(function(x){
x.addEventListener("mouseover", function () {
video = this.querySelector('video');
if (video.muted == true) {
video.muted = false;
} else {
video.muted = true;}
}, false)
x.addEventListener("mouseout", function () {
this.querySelector('video').muted = true;
}, false)
x.addEventListener("click", function () {
this.off('mouseover').;
})
What i'm trying is to play the video with sound after a click, but instead, it continues with the mouseover effect.
Thank you! and sorry for bad english
Use removeEventListener to remove attached event handler
function mouseoverfunc() {
video = this.querySelector('video');
if (video.muted == true) {
video.muted = false;
} else {
video.muted = true;}
}
document.querySelectorAll('.box').forEach(function(x){
x.addEventListener("mouseover",mouseoverfunc, false)
x.addEventListener("mouseout", function () {
this.querySelector('video').muted = true;
}, false)
x.addEventListener("click", function () {
this.removeEventListener('mouseover',mouseoverfunc);
})

I want to make left click behave as right click using either JS or jQuery

I have been trying to trigger right click even when the users left click.
I have tried trigger, triggerHandler, mousedown but I wasn't able to get it to work.
I'm able to catch the click events themselves but not able to trigger the context menu.
Any ideas?
To trigger the mouse right click
function triggerRightClick(){
var evt = new MouseEvent("mousedown", {
view: window,
bubbles: true,
cancelable: true,
clientX: 20,
button: 2
});
some_div.dispatchEvent(evt);
}
To trigger the context menu
function triggerContextMenu(){
var evt = new MouseEvent("contextmenu", {
view: window
});
some_div.dispatchEvent(evt);
}
Here is the bin: http://jsbin.com/rimejisaxi
For better reference/explanation: https://stackoverflow.com/a/7914742/1957036
Use the following code for reversing mouse clicks.
$.extend($.ui.draggable.prototype, {
_mouseInit: function () {
var that = this;
if (!this.options.mouseButton) {
this.options.mouseButton = 1;
}
$.ui.mouse.prototype._mouseInit.apply(this, arguments);
if (this.options.mouseButton === 3) {
this.element.bind("contextmenu." + this.widgetName, function (event) {
if (true === $.data(event.target, that.widgetName + ".preventClickEvent")) {
$.removeData(event.target, that.widgetName + ".preventClickEvent");
event.stopImmediatePropagation();
return false;
}
event.preventDefault();
return false;
});
}
this.started = false;
},
_mouseDown: function (event) {
// we may have missed mouseup (out of window)
(this._mouseStarted && this._mouseUp(event));
this._mouseDownEvent = event;
var that = this,
btnIsLeft = (event.which === this.options.mouseButton),
// event.target.nodeName works around a bug in IE 8 with
// disabled inputs (#7620)
elIsCancel = (typeof this.options.cancel === "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
return true;
}
this.mouseDelayMet = !this.options.delay;
if (!this.mouseDelayMet) {
this._mouseDelayTimer = setTimeout(function () {
that.mouseDelayMet = true;
}, this.options.delay);
}
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted = (this._mouseStart(event) !== false);
if (!this._mouseStarted) {
event.preventDefault();
return true;
}
}
// Click event may never have fired (Gecko & Opera)
if (true === $.data(event.target, this.widgetName + ".preventClickEvent")) {
$.removeData(event.target, this.widgetName + ".preventClickEvent");
}
// these delegates are required to keep context
this._mouseMoveDelegate = function (event) {
return that._mouseMove(event);
};
this._mouseUpDelegate = function (event) {
return that._mouseUp(event);
};
$(document)
.bind("mousemove." + this.widgetName, this._mouseMoveDelegate)
.bind("mouseup." + this.widgetName, this._mouseUpDelegate);
event.preventDefault();
mouseHandled = true;
return true;
}
});
Now at the function calling event use mouseButton : 3 for right click and 1 for left click

child div click event triggers parent click event

How do i prevent the parent click event from firing if the child div is clicked?
http://jsfiddle.net/2GEKu/
var p = document.getElementById('parent');
var c = document.getElementById('child');
p.onclick = function () {
alert('parent click');
}
c.onclick = function () {
alert('child click');
}
Invoke the .stopPropagation() method of the event object in the child's handler.
var p = document.getElementById('parent');
var c = document.getElementById('child');
p.onclick = function () {
alert('parent click');
}
c.onclick = function (event) {
event.stopPropagation();
alert('child click');
}
To make it compatible with IE8 and lower, do this:
c.onclick = function (event) {
if (event)
event.stopPropagation();
else
window.event.cancelBubble = true;
alert('child click');
}

Jquery hover with .on()

Im trying to use hover with .on(), but all bits of code and answers i find do not work.
I need to use .on because its Ajax content.
A few ive tried:
$(document).on('mouseenter', '[rel=popup]', function() {
mouseMove = true;
width = 415;
$('#tool-tip').show();
var type = $(this).attr('data-type'),
id = $(this).attr('data-skillid');
console.log("TT-open");
ttAjax(type, id);
}).on('mouseleave', '[rel=popup]', function() {
mouseMove = false;
console.log("TT-close");
$('#tool-tip').hide();
$('#tt-cont').html("");
$('#tt-ajax').show();
});
$('[rel=popup]').on('hover',function(e) {
if(e.type == "mouseenter") {
mouseMove = true;
width = 415;
$('#tool-tip').show();
var type = $(this).attr('data-type'),
id = $(this).attr('data-skillid');
console.log("TT-open");
ttAjax(type, id);
}
else if (e.type == "mouseleave") {
mouseMove = false;
console.log("TT-close");
$('#tool-tip').hide();
$('#tt-cont').html("");
$('#tt-ajax').show();
}
});
$('[rel=popup]').on("hover", function(e) {
if (e.type === "mouseenter") { console.log("enter"); }
else if (e.type === "mouseleave") { console.log("leave"); }
});
$(document).on({
mouseenter: function () {
console.log("on");
},
mouseleave: function () {
console.log("off");
}
}, "[rel=popup]"); //pass the element as an argument to .on
The original non .on:
$('[rel=popup]').hover(function(){
mouseMove = true;
width = 415;
$('#tool-tip').show();
var type = $(this).attr('data-type'),
id = $(this).attr('data-skillid');
console.log("TT-open");
ttAjax(type, id);
},function () {
mouseMove = false;
console.log("TT-close");
$('#tool-tip').hide();
$('#tt-cont').html("");
$('#tt-ajax').show();
})
All the .on return "TypeError: $(...).on is not a function". I am using version 1.9.1.
The events you're looking for may be
$("#id").mouseover(function(){});
or
$("#id").mouseout(function(){});
There was an answer with:
$(document).on({
mouseenter: function () {
console.log("on");
},
mouseleave: function () {
console.log("off");
}
},"[rel=popup]");
This worked, and for some reason I have JQ 1.4 in a 1.9.1 named file that was causing the problem.

multiple autocomplete dropdowns not working

When I have one autocomplete dropdown for one field everything works fine, however when I add more dropdowns for more fields the value of the input fields is no longer populated with the text of the li which is returned from the php file which is called
The following works where .sugnorm1 is the class of the li
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function () {
$('#quality1').bind('input propertychange', function () {
delay(function () {
$.post("functions/autocomplete.php", {
quality:$(this).val(),
questionname:"<?php echo $_SESSION['question']; ?>",
count:1
}, function (response) {
$('#qualitySuggest1').hide();
setTimeout("finishAjax('qualitySuggest1', '" + escape(response) + "')", 20);
});
return false;
}, 20);
});
});
$('.sugnorm1').live("mouseover mouseout click", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('sughover');
} else if ( event.type == "click") {
$("#quality1").val($(this).text());
$("#qualitySuggest1").hide();
}
else {
$(this).removeClass('sughover');
}
});
$("#quality1").blur(function () {
$("#qualitySuggest1").hide();
});
});
function finishAjax(id, response) {
$('#' + id).html(unescape(response));
$('#' + id).show();
} //finishAjax
However if I add another field the quality suggest .hide() is called but I can't get anything else such as an alert to work in the event.type == click for both of the fields.
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function () {
$('#quality1').bind('input propertychange', function () {
delay(function () {
$.post("functions/autocomplete.php", {
quality:$(this).val(),
questionname:"<?php echo $_SESSION['question']; ?>",
count:1
}, function (response) {
$('#qualitySuggest1').hide();
setTimeout("finishAjax('qualitySuggest1', '" + escape(response) + "')", 20);
});
return false;
}, 20);
});
$('#quality2').bind('input propertychange', function () {
delay(function () {
$.post("functions/autocomplete.php", {
quality:$(this).val(),
questionname:"<?php echo $_SESSION['question']; ?>",
count:2
}, function (response) {
$('#qualitySuggest2').hide();
setTimeout("finishAjax('qualitySuggest2', '" + escape(response) + "')", 20);
});
return false;
}, 20);
});
});
$('.sugnorm1').live("mouseover mouseout click", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('sughover');
} else if ( event.type == "click") {
$("#quality1").val($(this).text());
$("#qualitySuggest1").hide();
}
else {
$(this).removeClass('sughover');
}
});
$("#quality1").blur(function () {
$("#qualitySuggest1").hide();
});
$('.sugnorm2').live("mouseover mouseout click", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('sughover');
} else if ( event.type == "click") {
$("#quality2").val($(this).text());
$("#qualitySuggest2").hide();
}
else {
$(this).removeClass('sughover');
}
});
$("#quality2").blur(function () {
$("#qualitySuggest2").hide();
});
});
function finishAjax(id, response) {
$('#' + id).html(unescape(response));
$('#' + id).show();
} //finishAjax
Thanks for your help!
My click event was being called after the blur event, thus the suggestion dropdown was hidden. I solved this by changing my click event to mousedown. Mousedown will then be called before blur.

Categories