Déclencheur d'événement à l'aide de Jquery ou Javascript

Salut, je sais que nous pouvons déclencher cliquez sur l'événement . mais je veux savoir qui peut nous déclencheur d'événement mousemove, sans réel mouvement de la souris par l'utilisateur.

Description :

Je veux afficher un message lorsque l'utilisateur de sélectionner quelque chose. sur la toile ,ma toile est plein de hauteur et de largeur,lorsque l'utilisateur clic sur un bouton de la toile montre. lorsque l'utilisateur ne les mouvements de la souris-il y voir un message "Cliquez et faites glisser sur n'importe quelle partie de la page web". ce message suit le mouvement de la souris de l'utilisateur.

Ce que je veux faire :

Lorsque l'utilisateur clique sur le bouton, il devrait voir le message "Cliquez et faites glisser sur n'importe quelle partie de la page web". et le message doivent suivre partout où l'utilisateur déplace la souris.

Problème :

Utilisateur n'est pas en mesure de voir le message après avoir cliqué jusqu'à ce qu'il/elle se déplace sa souris.

Code:

      function activateCanvas() {
var documentWidth = jQ(document).width(),
documentHeight = jQ(document).height();
jQ('body').prepend('<canvas id="uxa-canvas-container" width="' + documentWidth + '" height="' + documentHeight + '" ></canvas><form method="post" id="uxa-annotations-container"></form>');
canvas = new UXAFeedback.Canvas('uxa-canvas-container', {
containerClass: 'uxa-canvas-container',
selection: false,
defaultCursor: 'crosshair'
});
jQ(function() {
var canvas = jQ('.upper-canvas').get(0);
var ctx = canvas.getContext('2d');
var x,y;
var tooltipDraw = function(e) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
var str = 'Click and drag on any part of the webpage.';
ctx.fillStyle = '#ddd';
ctx.fillRect(x + 10, y - 60, 500, 40);
ctx.fillStyle = 'rgb(12, 106, 185)';
ctx.font = 'bold 24px verdana';
ctx.fillText(str, x + 20, y - 30, 480);
};
canvas.addEventListener('onfocus',tooltipDraw,0);
canvas.addEventListener('mousemove',tooltipDraw,0);
canvas.addEventListener('mousedown', function() {
canvas.removeEventListener('mousemove', tooltipDraw, false);
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
}, false);
});
}
jQ('body').on('click', '.mood_img_div', function() {
//alert("soemthing");
toggleOverlay();
activateCanvas();
});

J'ai fait une fonction qui est appelée après le clic, mais le message n'est pas visible. Est-il possible de l'appeler pour la première fois avec le message et le spectacle est à chaque fois lorsque l'utilisateur utilise la souris.

J'ai remplacé jQuery avec jQ parce que je fais mon propre plugin(ce n'est pas à l'origine du problème)

Qu'est-ce que jQUxarmy? Est censé être jQuery?
qu'est-ce que ce jQUxarmy? c'est une version éditée de jQuery?
J'ai remplacé jquery avec mon propre variable jQUxarmy .
pourquoi ne pas simplement ajouter un appel à tooltipDraw à la fin de votre gestionnaire de clic? Vous avez juste à passer l'événement click a argument et vous avez terminé non?
en fait la fonction est appelée lors d'un clic est fait, mais le texte est dessiné uniquement lorsque l'utilisateur déplace la souris. Je suis à la recherche de toute sorte que le texte soit visible juste après que l'utilisateur clique. J'ai donc besoin de générer de l'événement mousemove @Kaiido

OriginalL'auteur pawan kumar | 2016-12-14

11

Une bonne approche autochtone est d'utiliser dispatchEvent méthode sur EventTarget.

Il distribue un Événement à l' EventTarget, en invoquant l'touchées EventListeners dans l'ordre approprié. La normale des règles de traitement des événements (y compris la capture et facultatif phase de propagation) s'appliquent également aux événements distribués manuellement avec dispatchEvent().

Essayer
```
//1. Add an event listener first
canvas.addEventListener('mousemove', tooltipDraw ,0);
//2. Trigger this event wherever you wish
canvas.dispatchEvent(new Event('mousemove'));
```
dans votre cas, il doit déclencher événement mousemove sur toile élément.

(Le déclenchement des événements en JavaScript natif article peut également être utile):
```
var elem = document.getElementById('elementId');
elem.addEventListenter('mousemove', function() {
//Mousemove event callback
}, 0);
var event = new Event('mousemove');  //(*)
elem.dispatchEvent(event);
//Line (*) is equivalent to:
var event = new Event(
'mousemove',
{ bubbles: false, cancelable: false });
```
jQuery:

Essayer cela avec jQuery trigger méthode:
```
 $('body').bind('mousemove',function(e){   
//Mousemove event triggered!
});
$(function(){
$('body').trigger('mousemove');
});
```
OU (si vous avez besoin de déclenchement avec coords)
```
event = $.Event('mousemove');
//coordinates
event.pageX = 100;
event.pageY = 100; 
//trigger event
$(document).trigger(event);
```
OU
Essayez d'utiliser .mousemove() méthode jQuery

Aussi initMouseEvent
Le initMouseEvent fonction de DEPRECATED et a été supprimé de l'standards du Web. developer.mozilla.org/ru/docs/Web/API/MouseEvent/initMouseEvent
Ne savais pas que la mise à jour de nice!
J'ai essayé la dernière méthode et ça n'a pas fonctionné avant de poster ici question. Je veux un événement déclencheur, sans interaction de l'utilisateur.
Tous d'envoi de l'événement sans interaction de l'utilisateur. Essayez canvas.dispatchEvent(new Event('mousemove'));, dans votre cas, il doit déclencher événement mousemove sur l'élément canvas.

OriginalL'auteur Andrii Verbytskyi
1

Mais il est probablement possible d'imiter un tel cas, comme indiqué dans la Andrii Verbytskyi réponse, la plupart du temps, quand vous voulez le faire, c'est parce que d'une "X-Y "problème".

Si nous prenons OP cas, par exemple, ici nous avons absolument n'avez pas besoin de déclencher cet événement mousemove.

Pseudo-code de l'implémentation actuelle :
```
function mousemoveHandler(evt){
do_something_with(evt.pageX, e.pageY);
}
element.addEventListener('mousemove', mousemoveHandler)
function clickHandler(evt){
do_something_else();
}
element.addEventListener('click', clickHandler);
```
Et ce que nous voulons, c'est aussi appel do_something_with dans le gestionnaire de clic.

Donc, OP passe un certain temps à trouver un moyen de déclencher un faux mousemove, passe une autre quantité de temps à essayer de la mettre en œuvre, alors que tout ce qui est nécessaire pour ajouter un appel à do_something_with dans clickHandler.

Les deux mousemove et cliquez sur les événements de ces pageX et pageY propriétés, de sorte que l'événement peut être passé, mais dans d'autres cas, on peut aussi juste envie de le passer avec un faux objet contenant des propriétés requises.
```
function mousemoveHandler(evt){
do_something_with(evt.pageX, evt.pageY);
}
element.addEventListener('mousemove', mousemoveHandler)
function clickHandler(evt){
do_something_else();
do_something_with(evt.pageX, evt.pageY);
}
element.addEventListener('click', clickHandler);
//here we won't have pageX nor pageY properties
function keydownHandler(evt){
do_something_else();
//create a fake object, which doesn't need to be an Event
var fake_evt = {pageX: someValue, pageY: someValue};
do_something_with(fake_evt.pageX, fake_evt.pageY);
}
element.addEventListener('keydown', keydownHandler);
```
Note : vous êtes le mélange jQuery.on et element.addEventListener, de sorte que vous pourriez avoir besoin pour passer le originalEvent propriété de l'jQuery objet d'événement.

OriginalL'auteur Kaiido

let coordX = 0; //Moving from the left side of the screen
let coordY = window.innerHeight / 2; //Moving in the center
function move() {
//Move step = 20 pixels
coordX += 20;
//Create new mouse event
let ev = new MouseEvent("mousemove", {
view: window,
bubbles: true,
cancelable: true,
clientX: coordX,
clientY: coordY
});
//Send event
document.querySelector('Put your element here!').dispatchEvent(ev);
//If the current position of the fake "mouse" is less than the width of the screen - let's move
if (coordX < window.innerWidth) {
setTimeout(() => {
move();
}, 10);
}
}
//Starting to move
move();

OriginalL'auteur Aleksandr Zabyshnyu

Vous devez vous connecter pour publier un commentaire.