Clicking on an element that triggers the click on another

3

I have 5 images on my Slide

    <li><img src="images/slide3.jpg" alt=""></li>
    <li><img src="images/slide2.jpg" alt=""></li>
    <li><img src="images/slide5.jpg" alt=""></li>
    <li><img src="images/slide1.jpg" alt=""></li>
    <li><img src="images/slide4.jpg" alt=""></li>

By clicking on them directly, the account Jquery will execute the rotation.

But my intention is to put a menu below with the title of the items of the Slide so that the user, if he does not understand that it is to click on the image, directly click on the menu titles.

What pure JS solution could I use to solve this problem? (I'm a beginner and I know almost nothing from DOM manipulation).

    
asked by anonymous 09.11.2014 / 09:14

1 answer

5

The solution in JavaScript can be obtained as follows:

function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt);
   }
}

This function accepts two parameters, the target element and the event to be triggered on that target element.

Example also in JSFiddle .

Example

Below is an example of usage where we have a alert() in the first element, the second element to make use of the function presented above so that when it receives a click, the click event of the first element is triggered :

function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt);
   }
}
<div id="meuElemento" onclick="alert('bubu');">
  Se clicares aqui dá um alert()
</div>

<div onclick="fireEvent(document.getElementById('meuElemento'), 'click');">
  Se clicares aqui, vai despoletar o clique no elemento que tem o alert()
</div>

Documentation

Documentation on the method dispatchEvent() and on method fireEvent() of Internet Explorer:

  • Method fireEvent

      

    Triggers the event specified in the object.

  • Method dispatchEvent

      

    It triggers an event on the specified target element, invoking the affected eventlisteners in the appropriate order. Normal event processing rules (including capture and optional bubble phase) apply to manually triggered events with dispatchEvent() .

Note:
For more in depth, please refer to the documentation on Document Object Model Events the EventTarget interface, introduced in DOM level 2, where it explains the purpose of this interface as well as its operation in greater detail.

Function code originally posted in Firing Javascript Events (like onchange) jehiah.cz which was published by @jehiah on 2008-01-23, and was subsequently optimized this of the published SOEN by @Chris MacDonald.

    
09.11.2014 / 14:44