We Keep Coding

How to turn off passive event listener for mouse wheel scroll

I created a site that will change images from being displayed on mouse scroll. It was working until this morning on my local machine, but suddenly stopped. When I check the dev console I get an error message that says "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312"
I have read the information at the provided url and I still do not understand how I can turn off this feature. In my code I have the following:
var changeImage = function changeImage(event) {
event.preventDefault();
if (brochure.waitForDelay === false) {
window.onwheel = function () {
return false;
};
brochure.waitForDelay = true;
if (event.deltaY < 0) {
scrollUp();
} else {
scrollDown();
}
setTimeout(function () {
brochure.waitForDelay = false;
window.onwheel = function () {
return true;
};
}, 1250);
} else {
return;
}
};
var determineScrollDirection = function determineScrollDirection() {
document.addEventListener('wheel', changeImage, { passive: false });
};
In determineScrollDirection I set the passive as false and tried to call preventDefault in the changeImage function but I still get the same error message.

I was able to fix this issue by removing the following line:
window.onwheel = function () {
return false;
};

Module overwrite previous attached window mouseup event

I am currently working on a javascript module which open and close boxes, tooltip or similar, the function works great the only problem is when I call it twice on a page where the 'boxes' classes are different the window mouseup event will be overwritten and only one of the two module instances of boxes can now be closed after opening them.
var boxRevealer = (function () {
var buttons;
var boxes;
var element;
var drp_active = false;
var boxConstruct = function (btns, bxs) {
buttons = document.querySelectorAll(btns);
boxes = document.querySelectorAll(bxs);
boxEvents();
};
var boxEvents = function () {
buttons.forEach(function (e) {
e.addEventListener("click", function (ee) {
element = document.getElementById(e.getAttribute("data-drp"));
element.classList.toggle("displayn");
drp_active = true;
});
});
window.addEventListener("mouseup", function (e) {
if (drp_active === true) {
if (!e.target.classList.contains("filt_holy")) {
boxes.forEach(function (e) {
console.log("ELEMENT");
console.log(e);
e.classList.add("displayn");
});
}
}
}, false);
};
return {
boxConstruct: boxConstruct,
boxEvents: boxEvents
};
})();
Here is how i call the module
window.addEventListener("load", function(e){
boxRevealer.boxConstruct(".head_drp_btn", ".head_drp");
boxRevealer.boxConstruct(".mkt_drp_btn", ".mkt_drp");
});
So my question is, should I always name the boxes the same, or is there a work around?

Just remove the event before adding it, I think the same event is getting called twice.
So updated code will be as follows:
// Attach an event handler to <div>
e.addEventListener("mousemove", myFunction);
// Remove the event handler from <div>
e.removeEventListener("mousemove", myFunction);
And remove the window event as well before adding it.

Jquery function is starting on click but I need to stop it

I always wonder that onclick functions start to a javascript or jQuery, but How does it stop? Finally, I faced with a function in my learning progress. May you help me to find a solution?
I want to stop this function on another onclick:
function live_preview() {
var icon = document.getElementById('LivePreIcon');
if (icon.classList.contains('fa-eye-slash')) {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
$('#result').keyup(function () {
$('#dialog').html($(this).val());
});
return;
}
if (icon.classList.contains('fa-eye')) {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
// Stop the jquery function here
return;
}
}

var play=0;
function live_preview() {
var icon = document.getElementById('LivePreIcon');
var play;
if(!play){
if (icon.classList.contains('fa-eye-slash')) {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
$('#result').keyup(function () {
$('#dialog').html($(this).val());
play = 1;
});
return;
}
}
else{
if (icon.classList.contains('fa-eye')) {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
play=0;
return false;
// Stop the jquery function here
}
}
}

jQuery toggle triggers effect instead of handler [duplicate]

$('.slideArrow').toggle(function (event) {
//some code
}, function (event) {
//some code
});
This works fine for content which are loaded on page-load.But the same function does not work for content loaded with ajax.It just does not intercept the click.
What should I do?
In an other scenario,i faced a same problem(not for toggle,for click) and sorted it this way.I dont know what to do for toggle?
$('.common-parent').on('click','.target-of-click',function(){
//some code
})

The flag method :
var flag = false;
$(document).on('click', '.slideArrow', function(event) {
if (flag) {
// do one thing
}else{
// do another thing
}
flag = !flag;
});
the data method
$(document).on('click', '.slideArrow', function(event) {
if ( $(this).data('flag') ) {
// do one thing
}else{
// do another thing
}
$(this).data('flag', !$(this).data('flag'));
});

Managing and Maintaining too many on click jquery handlers

I recently have been upgrading the Phonegap to the latest version and now it forces me to follow the Chrome's Content Security Policy which in a way is good. But now I am forced to remove the all the onclick handlers in the HTML code and add them in the jquery handler some$(document).ready(function(evt){
$('#addRecordBtn').on('click', function(){
alert("Adding Record");
AddValueToDB();
});
$('#refreshBtn').on('click', function(){
alert("Refresh Records");
ListDBValues();
});
});
But as per what my app is scaled upto I feel that there will be too many of these handlers. Is there an example which shows maintenance of such handlers and a proper way or proper place of defining such handlers.

Here's an idea. You could make an object that stores all of the functions that also knows how to give up the function
var handlers = {
getHandler: function (str) {
return this[str];
},
'#addRecordBtn': function () {
alert("Adding Record");
AddValueToDB();
},
'#refreshBtn': function () {
alert("Refresh Records");
ListDBValues();
}
};
Then apply all of your handlers using this form.
$('#addRecordBtn').on('click', handlers.getHandler('#addRecordBtn'));
$('#refreshBtn').on('click', handlers.getHandler('#refreshBtn'));
Optimization Time if you want to get really fancy and you assign a unique ID to every button as convention
var handlers = {
defer: function () {
return function (){
handlers[$(this).attr('id')](arguments);
};
},
registerHandlers: function () {
for (var key in this) {
if (this.hasOwnProperty(key) && typeof(key) === "string") {
$('#' + key).on('click', this.defer());
}
}
},
'addRecordBtn': function () {
alert("Adding Record");
AddValueToDB();
},
'refreshBtn': function () {
alert("Refresh Records");
ListDBValues();
}
};
call it with
$('#addRecordBtn').on('click', handlers.defer());
$('#refreshBtn').on('click', handlers.defer());
or register everything automatically
handlers.registerHandlers();
Here is a fiddle of my solution

Do you look for something like this?
$('[data-clickhandler]').on('click', function(e) {
var $btn = $(e.currentTarget);
var handler = $btn.data('clickhandler');
alert('Refresh ' + handler);
window[handler] && window[handler](e);
e.preventDefault();
});
Now your elements can specify their clickhandler like so:
<a data-clickhandler="AddValueToDB" href="">...</a>
Or so:
<span data-clickhandler="ListDBValues">...</span>