Maybe this is a really stupid question, but I can't figure it out.
Basically all I want to do is emit a single event when the screen is touched (using a physical button on the model of google cardboard that we are ordering). Couldn't work out how to have a 'whole screen touch' so I made a button element outside the a-scene. This is positioned absolutely at the point where the button hits the screen, and console logs when clicked (via mouse) - so I know that the button works. However, trying to emit an event or setAttribute does nothing.
Is there something I'm doing wrong, or is there just some other approach entirely that is better suited?
Here's the code:
<body>
<button id="nav-btn" class="btn btn-primary">Menu</button>
<a-scene id="scene">
and:
AFRAME.registerComponent('nav', {
schema: {},
init: function () {
var navBtn = document.querySelector('#nav-btn');
var btnEls = document.querySelectorAll('.link');
navBtn.addEventListener('click', function () {
console.log('clicked');
for (var i = 0; i < btnEls.length; i++) {
console.log(btnEls[i]);
btnEls[i].emit('menuFade');
}
});
},
});
This works when using an a-entity as a button by the way, but I also couldn't find out how to make that work as a physical button!?
Thanks for any help or advice!
If you care about figuring out when the physical button is pressed on a Google Cardboard, then you don't even need a button element. Attach a "click" or "touchstart" handler to the window and you should be good:
window.addEventListener('touchstart', function(evt) {
console.log('there we go')
})
Note that emit isn't a vanilla JS way of emitting events but an A-Frame specific function, which is why it won't work from a button.
You can use dispatchEvent and CustomEvent for that instead:
window.addEventListener('touchstart', function(evt) {
console.log('there we go')
window.dispatchEvent(new CustomEvent('menuFade'))
})
You may need to change the object that emits the event to something inside the a-scene but it should work.
Related
We have a tabulator column definition , where one of them is a button created by a formatter
{title:"input", field:"blank", width:30, frozen:true, responsive:0,formatter:customFormatter2}
Into formatter we create a button
var customFormatter2 = function (cell, formatterParams) {
var $button=$('<button>').text('Hola')
$button.click(function(){
$(cell.getElement()).trigger('contextmenu')
})
return $button.get(0);
}
Also we have a rowContextmenu created into tabulator.
I want call to menu that tabulator shows when we do right click in any row.
I tried call a trigger from cell,from row... and I dont know if the event is accessible ,or I dont know do it.
Thanks
I don't user jQuery often, but I believe the only thing missing is preventing the propagation of the click event after the contextmenu event, which hides the menu. Something like this should work, but I also had to add pageX and pageY to my custom event, so that Tabulator could calculate where to display the menu. I am not sure how I would do this in jQuery.
$button.click(function(event){
event.stopImmediatePropagation();
$(cell.getElement()).trigger('contextmenu');
});
Or without jQuery and definitely works,
function customFormatter(cell, formatterParams){
const button = document.createElement('button');
button.textContent = "Hola";
button.addEventListener('click', (event) => {
event.stopImmediatePropagation();
const myEvent = new Event('contextmenu');
myEvent.pageX = event.pageX;
myEvent.pageY = event.pageY;
cell.getRow().getElement().dispatchEvent(myEvent);
})
return button;
}
Here is a full example without jQuery.
https://jsfiddle.net/nrayburn/guxkw394/101/
Be careful with this. Because we are creating a custom event, it doesn't contain all of the normal properties that a real event would. If Tabulator starts relying on different event properties, it would break this code. (Maybe you could copy the original event from the click and pass those properties into the custom event. Not really sure how to do that.)
I've been working on a web UI automation task with Selenium, Javascript and SeLion. I would like to take a screenshot of some equivalent scenario as Google homepage below:
In which the "Search by voice" should be present when mouse moves in that microphone icon (neither Click or Hover). I have search bunch of solutions, unfortunately non of them works as expected.
I'm basically dealing with something like this:
<div id="div_id">
<button type="button" class="button_class" disabled="" data-marko=" .
{"onclick":"handleClick s0-2-0-27-0
false","onkeydown":"handleKeydown s0-2-0-27-0 false"}"
title="This message shows by mouseenter event" aria-label="This
message shows by mouseenter event">
<span class="span_class"></span>
</button>
</div>
When mouse enters that button, "This message shows by mouseenter event" will be present. The page is likely written by Marko-js. Couldn't really handle it with plain Javascript, I tried.
Any idea?
Thanks in advance!
In which the "Search by voice" should be present when mouse moves in that microphone icon (neither Click or Hover)
if u read this link : https://www.w3.org/TR/DOM-Level-3-Events/#trusted-events , it says that only user agent events can trigger "search by voice" . its cant be done by scripts
I provided you a simple working example, give me a feedback if it is suitable for your needs.
function simulateMouseEnter() {
var event = new MouseEvent('mouseenter', {
'view': window,
'bubbles': true,
'cancelable': true
});
var myTarget = document.getElementById('target_div');
var canceled = !myTarget.dispatchEvent(event);
if (canceled) {
// A handler called preventDefault.
alert("canceled");
} else {
// None of the handlers called preventDefault.
alert("not canceled");
}
}
function mouseEnterBehaviour() {
myElement = document.getElementById("target_div");
// attach mouseenter event listener to element
myElement.addEventListener("mouseenter", function(event) {
// change the color of the font
event.target.style.color = "red";
});
// call the simulation
setTimeout(simulateMouseEnter,3000);
}
mouseEnterBehaviour();
<div id="target_div">target div</div>
Note: this should work with the most of the browser events
in my Cordova App I have a problem on iOS devices and I have no idea how to solve.
I have a custom auto-suggest which shows up below an input field while typing. All is contained in a dialog box with "position: fixed;".
Autocomplete is an unordered list. Click on < li > Element should place the selected text into the input.
The problem is, when user clicks on the li, the input loses focus, the keyboard disappears and the whole fixed dialog box "jumps" down and the click event is not recognized.
It is recognized when the keyboard already IS closed.
I tried several workarounds, like giving focus back to input field immediately after blur. But it does not help. Keyboard closes and opens instead of just keeping opened.
Any Ideas how to solve?
Here is a video showing the behaviour. It is recorded on the iOS Simulator but same behaviour on real iPhone 6s.
I have found a solution now. As I said the click event is not triggered when the keyboard hides, but a touchstart event is triggered.
So I did a workaround, looking for touchstart event followed by a blur event. If the touchstart-target does not receive a click event within a given time, I will trigger one. This works on my test iPhone 6s.
Here is the code:
var iosTapTarget=null;
if (device.platform === 'iOS') {
js.eventListener(document.body).add('iosTap', 'touchstart', function (e) {
iosTapTarget = e.target;
js.eventListener(iosTapTarget).add('iosTapClick', 'click', function(e) {
// when the target receives a click, do not trigger another click
if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
iosTapTarget = null;
});
// after short time unset the target
window.setTimeout(function () {
if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
iosTapTarget = null;
}, 600)
});
// on each input fields listen for blur event and trigger click event on element received touchstart before
var blurableElements = document.querySelectorAll('input[type=text],input[type=email],input[type=password],textarea');
for (var j = 0; j < blurableElements.length; ++j) {
js.eventListener(blurableElements[j]).remove('iosBlur', 'blur');
js.eventListener(blurableElements[j]).add('iosBlur', 'blur', function () {
window.setTimeout(function() {
if (iosTapTarget) {
js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
js.triggerEvent(iosTapTarget, 'click');
}
}, 50);
});
}
}
PS: Event handling comes from my own JS "framework" js.js available here: https://github.com/JanST123/js.js
But you can use vanilla JS event handling or jQuery event handling too, of course.
We all know that you can simulate click or any other event on an element using one of these ways:
$('#targetElement').trigger('eventName');
$('#targetElement').click();
I have encountered a situation in which, I should know how an element is clicked. I should know if it's been clicked automatically via code, or by pressing mouse button. Is there anyway I can do it without hacks or workarounds? I mean, is there anything built into browsers' event object, JavaScript, or jQuery that can tell us whether click has been initiated by a human action or by code?
Try this:
$('#targetElement').click(function(event, generated) {
if (generated) {
// Event was generated by code, not a user click.
} else {
// Event was generated by a user click.
}
});
Then, to make this work, you have to trigger them like this:
$('#targetElement').trigger('click', [true]);
See this jsfiddle.
Check out event.which, it'll be undefined if triggered with code.
$(document).click(function(event) {
if (event.which) {
// Triggered by the event.
} else {
// Triggered with code.
}
});
jsFiddle.
Here's one way I have found (tested in Chrome)
$('#foo').click(function(e) {
if (e.originalEvent)
alert('Has e (manual click)');
else
alert('No e (triggered)');
});
See here for testing: http://jsfiddle.net/ZPD8w/2/
In your immediate event handler, provide an e parameter. If the click is automated (via code), this e would be undefined (no need to check e.target as #alex has said):
$('#targetElement').click(function(e){
if(e)
{
// Click is triggered by a human action
}
else
{
// Click is triggered via code
}
});
I want to detect whenever someone clicks in a div (essentially I want to know when a user is interacting with a section of text on my site, be that by selecting some text or clicking on a link), but I don't want to interfere with what the user is doing.
If I put a onmousedown or onclick event on the div it ends up breaking selection, links, etc. Is there any way to catch these events without causing any interference ?
Onmousedown or onclick shouldn't interfere with anything as long as it doesn't return false;.
You can do this:
document.getElementById("spy-on-me").onmousedown = function () {
console.log("User moused down");
return true; // Not needed, as long as you don't return false
};
If you have other scripts that are attaching behaviour via this method on the page, then to prevent overriding them you can do:
var spyElement = document.getElementById("spy-on-me");
var oldMousedown = spyElement.onmousedown;
spyElement.onmousedown = function () {
console.log("User moused down");
if(oldMousedown) oldMousedown();
};
Yes, I suspect you are currently returning false at the end of the event binding, just don't do that or any of the things in this binding:
$('a').click(function(e) {
e.stopPropagation();
e.preventDefault();
return false;
});
If you do not do any of these three things, jQuery will not stop the event from bubbling up to the browser.
Edit: Sorry didn't realise it was a plain JavaScript question.
you can use do it by adding a event listener as well
var myNode= document.querySelector('.imagegrid');
myNode.addEventListener("click",function(e){
alert(e.target+" clicked");
});
A similar example is demonstrated here
Can't you simply add a click event to the div?
<div id="secretDiv" (click)="secretDivClick()">
then on your component:
secretDivClick() {
console.log('clicked');
}