Why is it that onclick event returns wrong srcElement even if I have put the onclick on the parent element it still return child element as the source of the click event. How can I make it to always select the element where I put the onclick method? Below is my code:
<div class="col-md-4 player-column" v-for="(player, index) in group" v-on:click="selectPlayers" :data-image="player.image">
<div class="players">
<div class="player-image">
<div class="circle">
<img class="img-responsive" v-if="player.image" :src="player.image | alternateIfImageExists(player.teamName, player.firstName+' '+player.familyName, 'small')">
<i class="fa fa-user" aria-hidden="true" v-else></i>
</div>
</div>
<div class="player-info">
<p class="player-fullname">{{player.firstName}} {{player.familyName}}</p>
<p>{{player.playingPosition}}</p>
<p v-if="player.teamCode !== ''">{{player.teamCode}}</p>
<p v-if="player.teamCode == ''">{{player.teamName}}</p>
<img :src="player.team_logo" :alt="player.teamCode">
</div>
</div>
</div>
Vue method
selectPlayers(e) {
console.log(e);
}
Console logs:
currentTarget:null
srcElement:div.player-info
target:div.player-info
currentTarget:null
srcElement:img.img-responsive
target:img.img-responsive
You have to use currentTarget.
<template>
<div>
<a #mouseover="mouseover"><img src="" /></a>
</div>
</template>
<script type="text/javascript">
export default {
name: 'component',
methods: {
mouseover(e) {
//e.currentTarget will always return a
}
}
}
</script>
target, srcElement is the element that triggered the event (e.g., the user
clicked on)
currentTarget is the element that the event listener is attached to.
By adding this as parameter when calling method I'm able to get the source of the element was
v-on:click="selectPlayers(this)"
Method:
selectPlayers(e) {
console.log(e);
}
Related
I cannot call & click a button using their ClassName or ID. I get an error
.click is not a function
What is wrong in my code?
I want to autoclick the download button using their ClassName or ID and tried the two code below but it is not working.
window.addEventListener("load", function() {
document.getElementById("toolbar_download_button").click();
});
<div id="toolbarNew" class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerRight">
<button id="toolbar_download_button" type="button" class="toolbarButton" style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
<div class="toolbarButton_tooltip" data-testid="toolbar-download-btn-tooltip">Download</div></button>
</div>
</div>
</div>
</div>
It looks like you're mixing up the jQuery click handler with Vanilla JavaScript. That's why it's throwing the error you mentioned.
If you want to add a click event handler you could do in several ways:
With the native click event handler
With the native onclick global event handler
With jQuery's click
With jQuery's on
window.addEventListener("load", function() {
// Vanilla JavaScript 'click'
document.getElementById("toolbar_download_button").addEventListener('click', function() {
console.log("Fire one");
});
// Vanilla JavaScript 'onclick'
document.getElementById("toolbar_download_button").onclick = function() {
console.log("Fire two");
};
// With jQuery's 'click'
$("#toolbar_download_button").click(function() {
console.log("Fire three");
});
// With jQuery's 'on'
$("#toolbar_download_button").on('click', function() {
console.log("Fire four");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toolbarNew" class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerRight">
<button id="toolbar_download_button" type="button" class="toolbarButton" style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
<div class="toolbarButton_tooltip" data-testid="toolbar-download-btn-tooltip">Download</div></button>
</div>
</div>
</div>
</div>
Tip: If decide to add jQuery to your project, then you might as well take advantage of it and use it to handle everything (capturing DOM elements, adding event handlers, etc.,). Otherwise use the native JavaScript handlers instead.
I am trying to add a click event to a text add states in description method stated below. Please help me resolve this issue.
<div>
class="alert-container"
v-for="alert in alerts"
>
<div class="alert-item">
<div class="alert-info">
{{alert.sender}}
</div>
<div v-if="alert.alert_type === 'urgent'">
<div class="alert-description">{{ addMethod(alert.description) }}</div>
</div>
<div v-else class="alert-description" v-html="alert.description"></div>
</div>
</div>
<script>
export default {
methods: {
addMethod(text) {
return text + '-' + add click event to here to the description text just so when the user clicks on the event below evacuation method runs.
},
evacuation() {
console.log("Leave the building now.")
}
}
}
</script>
Just render the description text then add the click avent to the wrapper element :
<div class="alert-description" #click="evacuation">{{ alert.description }} - </div>
adding the event inside a string and rendering it using v-html will not be interpreted.
<div class="alert-description">{{ alert.description }} - <div class="evacuation">Click here</div></div>
this is how I solved my problem
I have functioning code, but I am sure there is a way to write it cleaner.
My code is far from best practice I assume. Don't repeat yourself principle.
I have tried looking for this problem but can not find an answer.
Here are the expected result and my current code:
https://jsfiddle.net/9ednsp6x/
document.getElementById("BtnMoreTotalt").onclick = function() {MoreBtnTotalt()};
function MoreBtnTotalt() {
document.querySelector(".more-wrapper-totalt").classList.toggle("show");
}
I also wonder, if there is a way so I do not have to use specific id and classnames on every element? Could I only use class "more-wrapper" and skip the IDs?
Here you have your example with a re-usable button click handler.
To make it work, you have to:
Wrap all your groups of button/content in a wrapper div with a class
Change the CSS so it works over the wrappers class
Add the click event handler to every element of the class
Use the event to get the nearest wrapper
now you can change the class of it
// Query through all "a" elements that are inside a ".wrapper" element
document.querySelectorAll(".wrapper > a").forEach(b => {
// Add a click handler to each
b.onclick = (e) => {
// prevent the default action of an "a" element
e.preventDefault();
// get the closest wrapper from the event
let button = e.target;
let wrapper = button.closest(".wrapper");
// now change the class
wrapper.classList.toggle("show");
};
});
.wrapper > div {
visibility:hidden;
}
.wrapper.show > div {
visibility:visible
};
<div class="wrapper">
<div>test1</div>
Mer info
</div>
<div class="wrapper">
<div>test2</div>
Mer info
</div>
<div class="wrapper">
<div>test3</div>
Mer info
</div>
<div class="wrapper">
<div>test4</div>
Mer info
</div>
document.querySelectorAll(".more-button").forEach(element => {
element.onclick = (e) => {
const elm = document.getElementsByClassName(e.target.getAttribute("anchor"));
elm[0].classList.toggle("show");
};
});
.more-wrapper {
visibility:hidden;
}
.more-wrapper.show {visibility:visible};
<div class="more-wrapper more-wrapper-totalt">
<div>test1</div>
</div>
<a href="#" onClick="return false;">
<div anchor="more-wrapper-totalt" class="more-button">Mer info</div>
</a>
<div class="more-wrapper more-wrapper-kvant">
<div>test2</div>
</div>
<a href="#" onClick="return false;">
<div anchor="more-wrapper-kvant" class="more-button">Mer info</div>
</a>
<div class="more-wrapper more-wrapper-invb">
<div>test3</div>
</div>
<a href="#" onClick="return false;">
<div anchor="more-wrapper-invb" class="more-button">Mer info</div>
</a>
<div class="more-wrapper more-wrapper-barn">
<div>test4</div>
</div>
<a href="#" onClick="return false;">
<div anchor="more-wrapper-barn" class="more-button">Mer info</div>
</a>
You can add the className button with attribute after use this attr click event. It's like clone but i think you need this class another place.
This is an exercise from a test.
I need to get the remove button working. I don't understand why the line
document.getElementsByClassName("remove")[0].click();
is there either
Here is the code
function setup() {
// Write your code here.
}
// Example case.
document.body.innerHTML = `
<div class="image">
<img src="someimage.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="someimage.jpg" alt="Second">
<button class="remove">X</button>
</div>`;
setup();
document.getElementsByClassName("remove")[0].click();
console.log(document.body.innerHTML);
Edit: The expected output is that the remove button would remove the parent div (class="image")
It doesn't work because the "remove' button doesn't have a callback function for the click event defined for it.
Also, this: document.getElementsByClassName("remove")[0] should not be used as it causes a live node list to be created only to throw away that node list for just the first item in it. Instead, document.querySelector(".remove") should be used. See this other post of mine for details on this.
So, if we add a click event handler and clean up your code it will work:
function setup() {
// Write your code here.
// This will set up a callback function for when the remove button gets clicked:
theRemoveButton.addEventListener("click", function(){
console.log("You clicked the remove button!");
this.closest(".image").remove();
});
}
// Example case.
document.body.innerHTML = `
<div class="image">
<img src="someimage.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="someimage.jpg" alt="Second">
<button class="remove">X</button>
</div>`;
var theRemoveButton = document.querySelector(".remove");
setup();
theRemoveButton.click(); // Forces the click event to fire on the button
console.log(document.body.innerHTML);
I can't understand your problem but the
document.getElementsByClassName("remove")[0].click();
line simulate a click on the first element of the with a css class called "remove", so it's useless because no event are attached to this element.
I think the addEventListener function is what your looking for.
I have the following markup:
<div data-href="http://www.xxxxxxxxxxxxx.com/xxxxxxxx.php/Mediterranean-Youth-Hostel/Barcelona/6053" data-id="6053" class="property-wrapper row">
<div class="columns large-4 medium-4">v
<img class="recent-viewed-img" src="http://ucd.xxxxxxxxx.com/propertyimages/6/6053/107.jpg" alt="">
</div>
<div class="columns large-8 medium-8">
<div class="info">
<span class="city">Barcelona</span>
<span class="close right">x</span>
</div>
<span class="hostel-title">Mediterranean Youth Hostel</span>
<div class="rating">
<span class="number">9.1</span>
<span class="text">Fabulous</span>
</div>
<div class="bottom-info">
<span class="price-from">From €9.90</span>
<div class="icon_freewifi right">
<i class="fa fa-wifi"></i>Free WiFi
</div>
</div>
</div>
</div>
and 2 js function with 2 different click events as follow:
this one allows you to click the all row and take you to anoter page:
$('.property-wrapper .columns').on('click', function(){
window.location.href = $(this).parent().data('href');
});
this one simply closes and removes the row you just clicked on:
$('body').on('click', '.close.right', function(){
$(this).parent().parent().parent().fadeOut(200, function(){
CRO_106_removePropertyFromCookie($(this));
CRO_106_hideOverlayIfNoPropertiesLeft();
});
});
the problem is that when on .close.right it also goes to the other page.
The 2 click events are conflicting.
I can edit the markup, I have tried to have an "a" wrapper around but that didnt work either..
You need to check the event.target inside of the click handler bound to .property-wrapper .columns, and if it's .close.right, you can prevent the redirect from occurring:
$( '.property-wrapper .columns' ).on( 'click', function( evt ) {
if ( $( evt.target ).is( '.close.right' ) ) {
return true;
}
window.location.href = $( this ).parent().data( 'href' );
} );
You can't use event.stopPropagation() in the handler bound to the body because the above click handler would have already fired, and the redirect already occurred.
Here's a fiddle which demonstrates this and here's a fiddle with the proposed solution