I don't quite understand what this does
I read the rather official short documentation on it
https://api.jquery.com/event.relatedTarget/
Description: The other DOM element involved in the event, if any.
For mouseout, indicates the element being entered; for mouseover, indicates the element being exited.
I looked at the w3schools example on it
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_relatedtarget
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div, p").mouseenter(function(event){
$("#msg").html("Related target is: " + event.relatedTarget.nodeName);
});
});
</script>
</head>
<body>
<div style="height:200px;border:solid">This is a div element
<p style="background-color:pink">This is a paragraph</p>
</div><br>
<div id="msg" />
</body>
</html>
If you specify mouseenter as the event, does relatedTarget show the current container its in?
But what if you had jQuery event handler with both a "mouseleave" and "mouseenter" at same time?
could someone elaborate what the use cases are for event.related target as well in the real world if any?
Related
I am very new to JavaScript, jQuery and HTML etc. And I am supposed to implement this block of code (below) in a project and I am not quite sure what it is meant to do:
$(document).ready(function(){
$("body").click(function(){
$(this).hide();
});
});
I'm assuming it simply hides any element that is clicked.
You are correct, it hides everything inside of the HTML element. It is also important to note that it is written using jQuery, which is a JavaScript library that has helper functions to make JavaScript more accessible to use.
Here is one line at a time:
Wait for the page to finishing loading in the browser (aka the DOM, or document object model):
$(document).ready(function(){
});
When the user fires the click event on the body element, run the following function:
$("body").click(function(){
});
Hide the body:
$(this).hide();
this (in this context) refers to the body element targeted in the previous line, this is the same as writing: `$('body').hide();
this refers to something different based on the context in which it is used. In this example it is used in an event, so it refers to the element that received that event (body). See W3Schools.
.hide() is a built in jQuery function that sets the element to display: none;
$(document).ready is called when the page is ready for javascript to be executed. $("body") selects the body, the body of the document is where all of the visible HTML elements are shown. The click event is triggered when well, the element is clicked. $(this) selects the current element being operated on, which is the body. the hide function hides the selected element, which in this case is the body. So this code hides the body of the HTML page resulting in all visual elements being hidden.
It's simple, it puts an "on click" event on the body element.
So that means, when you click the body element. It will hide everything in between the opening <body> and the closing </body> tags
<body>
<!--everything in here will be hidden once body element is clicked-->
</body>
That code will make it so that clicking on any element on the page will cause the body element to hide.
That is - unless the element has it's own onclick functionality assigned that stops the event from bubbling up to the body element's onclick by using the event.stopPropagation() function.
Note: You could also have a call to event.stopPropagation() within the event handler rather than just having it as the event handler.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("body").click(function() {
$(this).hide();
});
});
</script>
<html>
<head>
<title>Testing javascript function</title>
</head>
<body>
<p>Here is one paragraph</p>
<p>Here is a second paragraph</p>
<p>Clicking on any element will hide the entire body element.</p>
<input type="button" value="random button" onclick="event.stopPropagation()" />
</body>
</html>
It is pretty straight forward.
Sample HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
...
</body>
</html>
Js:
$(document).ready(function(){ //executes when document model is ready
$("body").click(function(){ //once u click anywhere on the page this function will be executed
$(this).hide(); //hides everything between <body></body>
});
});
I have the HTML below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<section>
<a>first</a>
<a>second</a>
</section>
</div>
<section>
<a>third</a>
<a>fourth</a>
</section>
<section>
<div>
<a>fifth</a>
<a>sixth</a>
</div>
</section>
<script src="ex-2-a.js"></script>
<!--<script src="ex-2-b.js"></script>-->
</body>
</html>
I'm looking to add only one event listener to the whole document that would catch only 'a' tags that have a 'div' as ancestors.
This means that if I click first, second, fifth and sixth I would get a message saying "cool".
Any ideas on that matter since there's no id and working with only
tagnames?
Thanks to #Scott Marcus for helping out.
I submitted the answer and it worked.
I also found a new approach using .closest(). let me know your thoughts
document.addEventListener('click',(e)=>{
let currElm = e.target;
if (currElm.closest('div')) {
console.log(currElm);
}
});
Using "event delegation" (setting an event handler on an element high up in the DOM tree and allowing events from elements lower in the tree to bubble up and be caught), we can set up just one event handler at the body level and then we can check the actual source of the bubbled event against a collection of elements that match your criteria.
See inline comments for more:
// Set the event listener at the <body> and wait for other
// events to bubble up to it.
document.body.addEventListener("click", function(evt){
// Get an array of all the <a> elements that are descendants of <div> elements
let matches = Array.prototype.slice.call(document.querySelectorAll("div a"));
// Test to see if array contains the one that was clicked
if(matches.includes(evt.target)){
console.log("You clicked an <a> that is a descendant of a <div>!");
}
});
<div>
<section>
<a>first</a>
<a>second</a>
</section>
</div>
<section>
<a>third</a>
<a>fourth</a>
</section>
<section>
<div>
<a>fifth</a>
<a>sixth</a>
</div>
</section>
I'm trying to make a fadeToggle effect on jQuery,
the toggle effect works fine only in the second click on the <h1> tag.
in the first click it showing up and hide right after.
noticed that if I remove the text("how are you") method and put the inside the paragraph tag, it works perfectrly.
wondering why it doesn't work the first way.
This is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('h1').click(function(){
$('p').text("how are you").fadeToggle(500);
});
});
</script>
</head>
<body>
<h1>Hello jquery</h1>
<p></p>
</body>
</html>
fadeToggle works the same way as e.g. toggle (applies opposed attribute). And since the default state for the p element at the begininng is display: inline (is visible), then the next default action will be hiding it. That's why you have to define it initially as hidden.
$(document).ready(function() {
$('h1').click(function() {
$('.x').text("how are you").fadeToggle(500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello jquery</h1>
<p class='x' hidden></p>
It works correctly actually - the paragraph element is shown and by clicking on the heading, the function inserts text in it and then toggles fade. As the element is shown, by default (since there are no rules attached to it that would otherwise hide it), the fadeToggle will transition from shown to hidden state.
As stated in the comment above, to make fadeToggle begin by fading an element in, you should first hide the element (either via CSS or via JS, depending on your needs).
I am new to web development and I am learning JQuery now. I have a doubt here. This is the code from W3Schools.com. I would like to know if I add one more button here, how can I run this JavaScript for the click event of the FIRST button only.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
<br />
<button>Second Button</button>
</body>
</html>
You can add an ID to the button and put a click event on that id by selecting like this (if button id is 'submitForm') $("#submitForm")
In fact, there are many ways you can select elements with jquery, check this out: http://api.jquery.com/category/selectors/
In your specific example, if you don't want to put ID's on buttons, you could use :first to only access the first one, like this $("button:first")
Change
$("button").click(function(){
$("p").hide();
});
to
$("button").eq(0).click(function(){
$("p").hide();
});
This will only bind to the click event of the first button. See http://api.jquery.com/eq/.
jsFiddle example
How would I go about detecting which HTML element was tapped inside a UIWebView?
It seems a bit hacky, but right now the only way I can think of would be to evaluate JavaScript and use JS to traverse the DOM. Any help with this direction would be appreciated, too.
You could add a javascript function that takes a single argument, an id or whatever you prefer, and then add an onclick to all elements you are interested in that calls this function:
<html>
<head>
<title>Click test</title>
<script type="text/javascript">
function myClickHandler(elm)
{
alert('' + elm + ' element clicked');
}
</script>
</head>
<body>
<h1 onclick="myClickHandler('first');">First element</h1>
<h1 onclick="myClickHandler('second');">Second element</h1>
</body>
</html>
Edit: Ooh - you re not looking for a html/javascript solution. sorry.