CODEWITHSUNDEEP
jqueryhtml
Will Fisher
Will Fisher

Reputation: 41

Trigger onclick without clicking

I have created a news aggregator site which also measures the popularity of the posts. I have the HTML and jquery set up so that when you click the link it also counts the amount of clicks. 

<a class="headline" href="www.example.com/a" target="_newWindow" onclick="incStoryClicksCount('15280681', '_on_click_handler');  return wopen('www.example.com/a');" rel="nofollow">Example A</a>

However i need to test to to see if it works, is there an easier way when viewing the site than to click multiple times to try and get the count up. I was thinking trying to trigger it so it counts as a click, in the chrome console (F12). However i don't know how i'd go about doing that.

An alternative i was thinking about was changing the code when pressing on f12 in chrome, so that instead of 'on click' it would be when i slightly moved my mouse or click a button. However i also don't really know how to execute this.

Upvotes: 3

Views: 5715

Answers (5)

Danziger
Danziger

Reputation: 21161

You could try adding another event to the links, let's say mouseover as it might be easier to trigger multiple times, and slightly updating what they do to avoid opening the articles:

// Just mocking the functions in your code:

function _on_click_handler() {
  console.log('_on_click_handler() called.');
}

function incStoryClicksCount(id, handlerKey) {  
  console.log(`\nincStoryClicksCount(${ id }, ${ handlerKey }) called.`); 
  
  const handler = window[handlerKey];
  
  if (handler) handler();
}

function wopen(href) {
  console.log(`wopen(${ href }) called.`); 
  
  return false;  
}

// Let's create a function to replace wopen that won't open
// a link:

function noop() {
  console.log(`noop() called.`);
  
  return false;
}

// Let's grab all links and attach a mouseover event to them
// with  similar code to their original `onclick`:

Array.from(document.querySelectorAll('.link')).map((link) => {
  link.setAttribute('onmouseover',
    link.getAttribute('onclick').replace(/wopen\(/g, 'noop(')
  );
});
<a class="link" href="https://keyjs.dev/123" onclick="incStoryClicksCount('123', '_on_click_handler'); return wopen('https://keyjs.dev/123');">123</a>

<a class="link" href="https://keyjs.dev/456" onclick="incStoryClicksCount('456', '_on_click_handler'); return wopen('https://keyjs.dev/456');">456</a>

<a class="link" href="https://keyjs.dev/789" onclick="incStoryClicksCount('789', '_on_click_handler'); return wopen('https://keyjs.dev/789');">789</a>

Upvotes: 0

LeGEC
LeGEC

Reputation: 51890

If you want to test your incStoryClicksCount function, just call it :

incStoryClicksCount('15280681', '_on_click_handler');

If for some reason your incStoryClicksCount uses the this parameter, here is one way to call the function with a this parameter linked to an actual <a> node :

# adapat the following code to select a relevant 'a' node :
# this specific example will fetch the first 'a' node with class 'headline'
# in the whole page
var a = $('a.headline').get(0);

# call function and specify what value should be used as 'this' :
incStoryClicksCount.call(a, '15280681', '_on_click_handler');

Upvotes: 0

Sergii Shcherbak
Sergii Shcherbak

Reputation: 977

You can trigger "click" event of an element by binding it to another event, e.g. "keydown". Just a brief example: https://jsfiddle.net/wdop7ydk/1/

HTML

<a id='myLink' href='#'>My link</a>

JS/JQuery

let myLink = $("#myLink");

myLink.on('click', function() {
  console.log("Clicked");
});

$(document.body).on("keydown", function(e) {
  if ( e.keyCode === 13 ) {
    myLink.trigger("click"); // Or myLink.click(), as prtdomingo suggested.
  };
});

Here, every time you press Enter button, the link's "click" event fires. (You can look up the codes of keyboard buttons here, if needed: http://keycode.info.)

Upvotes: 0

prtdomingo
prtdomingo

Reputation: 981

You can use the .click() method of jQuery. For example

$('a.headline').click();

It will trigger the event

Upvotes: 6

Bardo
Bardo

Reputation: 2523

If you persist your data into database, you can just modify the values into the database.

If what you want to test is the clicking event, there are programs that simulate load into websites, those sites can launch clicks into your site.

A better and simpler approach could be just to launch your click event into a javascript loop:

function launchMyClick(newsObject) {
    for(var x = 0; x < 1000; x++)
        newsObject.click(); //newsObject is the jQuery object representing your link.
}

Just call several times this function for each piece of news and you'll see the effect of 1000 clicks on it.

Upvotes: 1

Related Questions