The following is the full JavaScript code for a quiz. It works perfectly on desktop browsers. However, when I went to test it on my phone, it doesn't work.
Mobile loads the JSON quiz, but after all the answers are selected, it does not freeze all the selected answers and display the results. Instead, nothing happens, no result is shown/calculated, and the user can continue to select answers.
I'm not experienced with JavaScript on Mobile and don't know what is causing the problem.
I've deleted a few parts of the code that simply appended html in order to cut down on size.
You can view it here: plnkr.co/edit/tkCQVxoIq9oOiApeUY66?p=preview
// Adds the functionality to check if an element has a class
HTMLElement.prototype.hasClass = function (className) {
"use strict";
if (this.classList) {
return this.classList.contains(className);
}
return (-1 < this.className.indexOf(className));
};
// Adds the ability to remove classes from elements
HTMLElement.prototype.removeClass = function (className) {
"use strict";
if (this.classList) {
this.classList.remove(className);
}
return this;
};
var BF_QUIZ = {};
BF_QUIZ.quiz = function () {
"use strict";
// Sets variables
var highest_score, quiz_div, quiz_title, quiz_image, questions = [],
results = [], inputs = [], answers = [], userAnswers = [],
// Gets the Quiz "canvas"
getQuizCanvas = function getQuizCanvas() {
quiz_div = document.getElementById("bf-quiz");
},
// Parses the JSON data passed from the Loader
getJSONData = function getJSONData(json_data) {
//Main Quiz Title
quiz_title = json_data[0].quiz_title;
//Main Quiz Image
quiz_image = json_data[0].quiz_image;
//Populates questions arrary with questions from JSON file
for (var i = 0; i < json_data[0].quiz_questions.length; i++) {
questions.push(json_data[0].quiz_questions[i]);
}
//Populates results array with results from JSON file
for (var j = 0; j < json_data[0].quiz_results.length; j++) {
results.push(json_data[0].quiz_results[j]);
}
},
// Writes the Quiz into the document
writeQuiz = function writeQuiz() {
var newQuizWrapper, newTitle, newQuestionTextWrapper, newQuestionText,
newAnswerForm, newAnswer, newAnswerImage, newAnswerTextWrapper, newAnswerInput,
newAnswerText, newQuestion;
newQuizWrapper = document.createElement("div");
newQuizWrapper.className = "quiz-wrapper";
newTitle = document.createElement("h1");
newTitle.innerHTML = quiz_title;
newQuizWrapper.appendChild(newTitle);
for (var i = 0; i < questions.length; i++) {
newQuestionTextWrapper = document.createElement("div");
newQuestionTextWrapper.className = "quiz-question-text-wrapper";
newQuestionText = document.createElement("h2");
newQuestionText.innerHTML = questions[i].question.text;
newQuestionTextWrapper.appendChild(newQuestionText);
newAnswerForm = document.createElement("form");
for (var j = 0; j < questions[i].question.question_answers.length; j++) {
newAnswer = document.createElement("div");
newAnswer.className = "quiz-answer";
newAnswer.setAttribute("data-quizValue",
questions[i].question.question_answers[j].answer.value);
if (questions[i].question.question_answers[j].answer.image) {
newAnswerImage = document.createElement("img");
newAnswerImage.src = questions[i].question.question_answers[j].answer.image;
newAnswer.appendChild(newAnswerImage);
}
else{
//no image
}
newAnswerTextWrapper = document.createElement("div");
newAnswerTextWrapper.className = "quiz-answer-text-wrapper";
newAnswerTextWrapper.id = "quiz-answer-text-wrapper";
newAnswerInput = document.createElement("input");
newAnswerInput.type = "radio";
newAnswerInput.name = "answer";
inputs.push(newAnswerInput);
newAnswerText = document.createElement("label");
newAnswerText.htmlFor = "quizzer";
newAnswerText.innerHTML = questions[i].question.question_answers[j].answer.text;
newAnswerTextWrapper.appendChild(newAnswerInput);
newAnswerTextWrapper.appendChild(newAnswerText);
newAnswer.appendChild(newAnswerTextWrapper);
answers.push(newAnswer);
newAnswerForm.appendChild(newAnswer);
}
newQuestion = document.createElement("div");
newQuestion.className = "quiz-question";
newQuestion.appendChild(newQuestionTextWrapper);
newQuestion.appendChild(newAnswerForm);
newQuizWrapper.appendChild(newQuestion);
}
quiz_div.appendChild(newQuizWrapper);
},
//Checks all of the inputs to see if the
checkInputs = function checkInputs() {
var c = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
userAnswers.push(inputs[i].parentNode.parentNode.dataset.quizvalue);
c++;
}
}
if (c==questions.length) {
calcResult();
}
},
calcResult = function calcResult() {
var highest = 0;
for (var i = 0; i < results.length; i++) {
results[i].countof = 0;
for (var j = 0; j < userAnswers.length; j++) {
if (userAnswers[j] == results[i].result.id) {
results[i].countof++;
}
}
if (results[i].countof > highest) {
highest = results[i].countof;
highest_score = results[i];
}
}
//disable the inputs after the quiz is finished
writeResult();
disableAnswers();
},
writeResult = function writeResult() {
newResult = document.createElement("div");
//append html to render (quiz result)
...;
quiz_div.appendChild(newResult);
},
updateSelectedAnswer = function updateSelectedAnswer(element) {
element.children.namedItem("quiz-answer-text-wrapper").firstChild.checked = true;
for (var i = 0; i < element.parentNode.children.length; i++) {
if (element.parentNode.children.item(i).hasClass("selected")) {
element.parentNode.children.item(i).removeClass("selected");
}
}
element.className = element.className + " selected";
},
addClickEvents = function addClickEvents() {
var onAnswerClick = function onAnswerClick() {
if (!this.hasAttribute("disabled")) {
updateSelectedAnswer(this);
checkInputs();
}
};
for (var i = 0; i < answers.length; i++) {
answers[i].addEventListener("click", onAnswerClick);
}
},
disableAnswers = function disableAnswers() {
for (var q = 0; q < answers.length; q++) {
answers[q].disabled = true;
answers[q].setAttribute("disabled", true);
answers[q].className = answers[q].className + " disabled";
}
};
return {
init: function (json_data) {
getQuizCanvas();
getJSONData(json_data);
writeQuiz();
addClickEvents();
}
};
}();
BF_QUIZ.quizLoader = function () {
"use strict";
var json_data, request,
loadQuizJSON = function loadQuizJSON(json_url) {
request = new XMLHttpRequest();
request.open("GET", json_url, false);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
json_data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
};
return {
init: function(json_url) {
loadQuizJSON(json_url);
BF_QUIZ.quiz.init(json_data);
}
};
}();
If you ever try to see console log on a mobile device, you might notice that there is a JavaScript error because iOS Safari is less forgiving than whatever desktop browser you use. Particularly it is illegal to set style property of HTMLElement as string in strict mode. You may see examples of the ways to set it properly at https://developer.mozilla.org/en/docs/Web/API/HTMLElement/style If you fix this issue, code seems to be working on Mobile Safari as well.
P.S. note that the offending code is missing in your question and is only visible in the full code of writeResult on plunker. This is why it is so important to provide a Minimal, Complete, and Verifiable example
From your plunker, if you update your code on line 152 from newResultTitle.style = "color:rgba(238,62,52,.99);"; to newResultTitle.style.color = "rgba(238,62,52,.99)"; this would make it work on mobile browsers.
HTMLElement.style reruns a read only property, desktop browser ignoring it when you are trying to assign a value to it, and mobile browser throwing an error.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
Working plunker http://plnkr.co/edit/aVxTP5YCbL94v2GI0IKh?p=preview
Related
Hi im trying to get the score elements from an xmlto then upload to the local storage i have the xml upload as you can see in this image
xmluploaded but when i try to get the elements of Score it appears this error this.xmlDoc.getElementsByClassName is not a function ,i would appreciate the help.
class XML_Database {
constructor () {
this.xmlDoc = null;
}
loadXMLfile(path, callback){
let request = new XMLHttpRequest();
request.open("GET",path,true);
request.setRequestHeader("Content-Type","text/xml");
request.onreadystatechange= function(){
if(request.readyState=== XMLHttpRequest.DONE && request.status==200){
callback(request.responseXML);
}
};
request.send()
}
SearchXML (query, num_scores) {
let Scores = [];
let x = this.xmlDoc.getElementsByClassName(query);
if (num_scores> x.length) {
num_scores= x.length;
}
for (let i = 0; i < num_scores; i++) {
for (let j = 0; j < x[i].childNodes.length; j++) {
if (x[i].childNodes[j].nodeName == "Value") {
Scores.push(x[i].childNodes[j].textContent);
break;
}
}
}
return Scores;
}
setXMLDoc(xmlDoc){
this.xmlDoc = xmlDoc;
}
and this is when i call the methods
set_xml(){
const self = this;
let new_XML_file = "/xml/Scores_Database.xml";
this.XML_db.setXMLDoc(new_XML_file);
this.XML_db.loadXMLfile(new_XML_file,function(xml){
console.log(xml);
self.XML_db.SearchXML("Score", 5) ;
});
}
I'm using pdfjs to display a PDF form (acroforms example). If I fill in some fields, how do I get those annotations.
I've tried:
pdfPage.getAnnotations().then(function(a) {
for(var i = 0;i < a.length; i++) {
console.log(a[i].id + ' - ' + a[i].fieldValue);
}
});
But all I get are empty fieldValues. I guess I'm getting them from the original PDF. How do I access the live document which includes the new annotations?
async getAnnotations() {
var result = {};
var pages = PDFViewerApplication.pdfDocument.numPages;
for (var i = 1; i <= pages; i++) {
var page = await PDFViewerApplication.pdfDocument.getPage(i);
var annotations = await page.getAnnotations();
for (var j = 0; j < annotations.length; j++) {
var element = annotations[j];
// Field Name
if (result[element.fieldName] == null) {
result[element.fieldName] = null;
}
var val = PDFViewerApplication.pdfDocument.annotationStorage.getOrCreateValue(element.id);
if (element.radioButton) {
if (val.value) {
result[element.fieldName] = element.buttonValue;
}
} else if (element.checkBox) {
result[element.fieldName] = val.value ? "On" : "Off";
} else {
result[element.fieldName] = val.value;
}
}
};
return result;
}
You should save values written by user in a local variable
Then you should create a xfdf file ( xml file by Adobe ) , look for Example nere : https://developer.salesforce.com/page/Adobe_XFDF . The xfdf should then be merged with original pdf to produce a new compiled pdf
I am trying to create a customizable list with links that can be hidden using a class if you click in a button. Also the list have a sortable option that you can move the links on the list, which saves to localstorage.
The problem is that I don't know how to save the class change with the list order in the localstorage if you click the "add/remove" button on each li.
Also, if anyone can help me improve the code I will be grateful, I am a newbie with localstorage and only managed this with a lot of reading in tutorials and documentation.
Here's a working example:
http://codepen.io/RogerHN/pen/EgbOzB
var list = document.getElementById('linklist');
var items = list.children;
var itemsArr = [];
for (var i in items) {
itemsArr.push(items[i]);
}
// localStorage
var ls = JSON.parse(localStorage.getItem('userlist') || '[]');
for (var j = 0; j < ls.length; j++) {
for (i = 0; i < itemsArr.length; ++i) {
if(itemsArr[i].dataset !== undefined){
if (ls[j] === itemsArr[i].dataset.id) {
list.appendChild(itemsArr[i]);
}
}
}
}
$('.list-block.sortable').on('sort', function () {
var newIdsOrder = [];
$(this).find('li').each(function(){
newIdsOrder.push($(this).attr('data-id'));
});
// store in localStorage
localStorage.setItem('userlist', JSON.stringify(newIdsOrder));
});
You want something like this:
var myApp = new Framework7({
swipePanel: 'left'
});
// Export selectors engine
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
var list = document.getElementById('linklist');
var items = list.children;
var itemsArr = [];
for (var i in items) {
itemsArr.push(items[i]);
}
// localStorage
var ls = JSON.parse(localStorage.getItem('userlist') || '[]');
var classes = JSON.parse(localStorage.getItem('classes') || '["","","","","","","","","",""]');
for (var j = 0; j < ls.length; j++) {
for (i = 0; i < itemsArr.length; ++i) {
if(itemsArr[i].dataset !== undefined){
if (ls[j] === itemsArr[i].dataset.id) {
itemsArr[i].className = classes[i];
list.appendChild(itemsArr[i]);
// handle [add/remove] thing
if (classes[i] != "") {
$(itemsArr[i]).find(".checky").removeClass("selected");
}
}
}
}
}
$('.list-block.sortable').on('sort', saveInfo);
$(".restore").click(function(e) {
$(".confirm").show();
$(".shadow").show();
});
$(".no,.shadow").click(function(e) {
$(".confirm").hide();
$(".shadow").hide();
});
$(".yes").click(function(e) {
$(".confirm").hide();
});
$(".lbl").click(function(e) {
$(".toggle-text").toggleClass("blue");
$(".restore").toggle();
$(".checky").toggle();
$("li.hidden").toggleClass("visible");
});
$('.checky').click(function() {
if (!$(this).hasClass("selected")) {
$(this).parent().removeClass("hidden").addClass("visible");
}
else {
$(this).parent().addClass("hidden visible");
}
$(this).toggleClass("selected");
saveInfo();
});
function saveInfo() {
var newUserList = [];
var newClassList = [];
$("#linklist").find('li').each(
function() {
newUserList.push($(this).attr('data-id'));
if ($(this).hasClass("hidden")) {
newClassList.push("hidden");
}
else {
newClassList.push("");
}
});
// store in localStorage
localStorage.setItem('userlist', JSON.stringify(newUserList));
localStorage.setItem('classes', JSON.stringify(newClassList));
console.log("saved.");
}
function reset() {
console.log("Removing data from local storage.");
localStorage.setItem('userlist', '["1","2","3","4","5","6","7","8","9","10"]');
localStorage.setItem('classes', '["","","","","","","","","",""]');
window.location.reload(true);
};
Codepen
Technically, I should've added explanation...
I have a function which is called when a file is needed to be read in a folder. In this case since i have 3 files in that folder, it is called 3 times consecutively. I need to save all files info into array mapped_data2 like that:
mapped_data2[0] = inner_data1 //first file info,
mapped_data2[1] = inner_data2 //second file info etc.
However using my code i am having just the first files information 3 times. I am a bit confused with global variables, if you can point out the problem, i would appreciate it.
here is the code:
var mapped_data = [];
var mapped_data2 = [];
function o(msg) {
if (msg.data) {
var inner_data = [];
var lines = msg.data.split('\n'); //read lines of a file
for (var i = 2; i < lines.length; i++) {
if (lines[i].length > 0) {
.. //do same data format here
inner_data.push([son, vactual, voutput]);
}
}
mapped_data = inner_data;
}
else {
if (msg.topic == "/somefolder/somefolder") {
for (var i = 0; i < msg.args.length; i++) {
var filename = msg.args[i];
aw.get(filename);
}
}
}
}
function de() { //where i wanted to use these files info
for (var i = 0; i < 3; i++) {
mapped_data2[i] = { key: "Group" + (i + 1), values: mapped_data };
}
var datam = mapped_data2;
var den = JSON.stringify(datam);
document.write(den);
};
function init() {
..//create new client called aw for the server application and start it;
..//if the connection is established:
aw.onmessage = o;
aw.get("/somefolder/somefolder"); // request list of files in a folder
};
//when html page is being onload, call the functions init() and de()
var mapped_data2 = [];
function o(msg) {
var mapped_data = []; // this doesn't need to be global
if (msg.data) {
var inner_data = [];
...
mapped_data = inner_data;
} else {
...
}
mapped_data2.push({ key: "Group" + mapped_data2.length + 1, values: mapped_data };)
// do more stuff as in den()
}
I am working on a project that imports some javascript rules from a file myjs.js, which is called (on all the web page of the project) in the header.
This files manages the behavior of checkboxes, and in fact toggling the checks of every checkbox pairs. The problem is that in some case, this behavior is wrong but I can't change anything in this js file because it is too complex.
So, on some page, I decided to listen to the click event on some checkbox to correct the behavior : the problem is that there is a conflict of script and I can't trigger my script (put on this very page). How can I force it to make my java script listened first ?
In fact the checkbox are constructed by myjs.js, applying to the html sequece
<div class="left">
<input type="radio" name="isPubOk" id="pubOk" checked="checked" />
<label for="pubOk"><?php echo _("Oui"); ?></label>
</div>
<div class="left">
<input type ="radio" name="isPubNok" id="pubNok" checked="" />
<label for="pubNok"><?php echo _("Non"); ?></label>
</div>
Here's a sample of the js file :
function initCustomForms() {
getElements();
separateElements();
replaceRadios();
replaceCheckboxes();
replaceSelects();
// hide drop when scrolling or resizing window
if (window.addEventListener) {
window.addEventListener("scroll", hideActiveSelectDrop, false);
window.addEventListener("resize", hideActiveSelectDrop, false);
}
else if (window.attachEvent) {
window.attachEvent("onscroll", hideActiveSelectDrop);
window.attachEvent("onresize", hideActiveSelectDrop);
}
}
function refreshCustomForms() {
// remove prevously created elements
if(window.inputs) {
for(var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) {checkboxes[i]._ca.className = "checkboxAreaChecked";}
else {checkboxes[i]._ca.className = "checkboxArea";}
}
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked) {radios[i]._ra.className = "radioAreaChecked";}
else {radios[i]._ra.className = "radioArea";}
}
for(var i = 0; i < selects.length; i++) {
var newText = document.createElement('div');
if (selects[i].options[selects[i].selectedIndex].title.indexOf('image') != -1) {
newText.innerHTML = '<img src="'+selects[i].options[selects[i].selectedIndex].title+'" alt="" />';
newText.innerHTML += '<span>'+selects[i].options[selects[i].selectedIndex].text+'</span>';
} else {
newText.innerHTML = selects[i].options[selects[i].selectedIndex].text;
}
document.getElementById("mySelectText"+i).innerHTML = newText.innerHTML;
}
}
}
// getting all the required elements
function getElements() {
// remove prevously created elements
if(window.inputs) {
for(var i = 0; i < inputs.length; i++) {
inputs[i].className = inputs[i].className.replace('outtaHere','');
if(inputs[i]._ca) inputs[i]._ca.parentNode.removeChild(inputs[i]._ca);
else if(inputs[i]._ra) inputs[i]._ra.parentNode.removeChild(inputs[i]._ra);
}
for(i = 0; i < selects.length; i++) {
selects[i].replaced = null;
selects[i].className = selects[i].className.replace('outtaHere','');
selects[i]._optionsDiv._parent.parentNode.removeChild(selects[i]._optionsDiv._parent);
selects[i]._optionsDiv.parentNode.removeChild(selects[i]._optionsDiv);
}
}
// reset state
inputs = new Array();
selects = new Array();
labels = new Array();
radios = new Array();
radioLabels = new Array();
checkboxes = new Array();
checkboxLabels = new Array();
for (var nf = 0; nf < document.getElementsByTagName("form").length; nf++) {
if(document.forms[nf].className.indexOf("default") < 0) {
for(var nfi = 0; nfi < document.forms[nf].getElementsByTagName("input").length; nfi++) {inputs.push(document.forms[nf].getElementsByTagName("input")[nfi]);
}
for(var nfl = 0; nfl < document.forms[nf].getElementsByTagName("label").length; nfl++) {labels.push(document.forms[nf].getElementsByTagName("label")[nfl]);}
for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName("select").length; nfs++) {selects.push(document.forms[nf].getElementsByTagName("select")[nfs]);}
}
}
}
// separating all the elements in their respective arrays
function separateElements() {
var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;
for (var q = 0; q < inputs.length; q++) {
if(inputs[q].type == "radio") {
radios[r] = inputs[q]; ++r;
for(var w = 0; w < labels.length; w++) {
if((inputs[q].id) && labels[w].htmlFor == inputs[q].id)
{
radioLabels[rl] = labels[w];
++rl;
}
}
}
if(inputs[q].type == "checkbox") {
checkboxes[c] = inputs[q]; ++c;
for(var w = 0; w < labels.length; w++) {
if((inputs[q].id) && (labels[w].htmlFor == inputs[q].id))
{
checkboxLabels[cl] = labels[w];
++cl;
}
}
}
}
}
//replacing radio buttons
function replaceRadios() {
for (var q = 0; q < radios.length; q++) {
radios[q].className += " outtaHere";
var radioArea = document.createElement("div");
if(radios[q].checked) {
radioArea.className = "radioAreaChecked";
}
else
{
radioArea.className = "radioArea";
}
radioArea.id = "myRadio" + q;
radios[q].parentNode.insertBefore(radioArea, radios[q]);
radios[q]._ra = radioArea;
radioArea.onclick = new Function('rechangeRadios('+q+')');
if (radioLabels[q]) {
if(radios[q].checked) {
radioLabels[q].className += "radioAreaCheckedLabel";
}
radioLabels[q].onclick = new Function('rechangeRadios('+q+')');
}
}
return true;
}
//checking radios
function checkRadios(who) {
var what = radios[who]._ra;
for(var q = 0; q < radios.length; q++) {
if((radios[q]._ra.className == "radioAreaChecked") && (radios[q]._ra.nextSibling.name == radios[who].name))
{
radios[q]._ra.className = "radioArea";
}
}
what.className = "radioAreaChecked";
}
//changing radios
function changeRadios(who) {
if(radios[who].checked) {
for(var q = 0; q < radios.length; q++) {
if(radios[q].name == radios[who].name) {
radios[q].checked = false;
}
radios[who].checked = true;
checkRadios(who);
}
}
}
//rechanging radios
function rechangeRadios(who) {
if(!radios[who].checked) {
for(var q = 0; q < radios.length; q++) {
if(radios[q].name == radios[who].name) {
radios[q].checked = false;
}
if(radioLabels[q]) {
radioLabels[q].className = radioLabels[q].className.replace("radioAreaCheckedLabel","");
}
}
radios[who].checked = true;
if(radioLabels[who] && radioLabels[who].className.indexOf("radioAreaCheckedLabel") < 0) {
radioLabels[who].className += " radioAreaCheckedLabel";
}
checkRadios(who);
if(window.$ && window.$.fn) {
$(radios[who]).trigger('change');
}
}
}
//replacing checkboxes
function replaceCheckboxes() {
if (replaceCheckBoxes == 0)
return;
for (var q = 0; q < checkboxes.length; q++) {
// checkboxes[q].className += " outtaHere";
var checkboxArea = document.createElement("div");
if(checkboxes[q].checked) {
checkboxArea.className = "checkboxAreaChecked";
if(checkboxLabels[q]) {
checkboxLabels[q].className += " checkboxAreaCheckedLabel"
}
}
else {
checkboxArea.className = "checkboxArea";
}
checkboxArea.id = "myCheckbox" + q;
checkboxes[q].parentNode.insertBefore(checkboxArea, checkboxes[q]);
checkboxes[q]._ca = checkboxArea;
checkboxArea.onclick = new Function('rechangeCheckboxes('+q+')');
if (checkboxLabels[q]) {
checkboxLabels[q].onclick = new Function('changeCheckboxes('+q+')');
}
checkboxes[q].onkeydown = checkEvent;
}
return true;
}
//checking checkboxes
function checkCheckboxes(who, action) {
var what = checkboxes[who]._ca;
if(action == true) {
what.className = "checkboxAreaChecked";
what.checked = true;
}
if(action == false) {
what.className = "checkboxArea";
what.checked = false;
}
if(checkboxLabels[who]) {
if(checkboxes[who].checked) {
if(checkboxLabels[who].className.indexOf("checkboxAreaCheckedLabel") < 0) {
checkboxLabels[who].className += " checkboxAreaCheckedLabel";
}
} else {
checkboxLabels[who].className = checkboxLabels[who].className.replace("checkboxAreaCheckedLabel", "");
}
}
}
//changing checkboxes
function changeCheckboxes(who) {
setTimeout(function(){
if(checkboxes[who].checked) {
checkCheckboxes(who, true);
} else {
checkCheckboxes(who, false);
}
},10);
}
Please see the jquery stopImmediatePropagation() function here: http://docs.jquery.com/Types/Event#event.stopImmediatePropagation.28.29
I believe this will achieve what you are looking to do.
Edit: With more detail I may be able to provide a better answer.
Edit 2: It appears that there is no guarantee'd order of execution in Javascript, so inline code may not run before dynamically added code. In addition this particular function may only work if the other handlers are added using jQuery.
Edit 3:
A quick and dirty fix would be to add
<script type="text/javascript">var executeHandlers = false;</script>
to the top of the one html file.
Then edit the javascript file such that the event handlers have
if (executeHandlers !== false) { ... do the logic you normally would here ... }
as the body
This would add one line to the html file that needs to be treated differently, and should not impact the execution on the other pages.
Please note that this is a quick and dirty fix, and there are better ways to do this. Working with the constraints of an existing .js file, and only one file that needs to be treated differently, this seems to be the fastest / easiest way to the desired outcome, not necessarily the best.