Срабатывание Клик с Jquery не работает

e=document.getElementById('4935-HCI-user-enjoyment'); 
 
e.onclick=showCoords; 
 

 
//If i try this it does alert but screenX and screenY cordinates are undefined 
 
$('#4935-HCI-user-enjoyment').trigger("click");

<html><head> 
 
    <title>MINDSEE</title> 
 

 
    <meta charset="utf-8"> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
    <script src="http://d3js.org/d3.v2.min.js"></script> 
 
    <script src="js/fisheye.js"></script> 
 
    <script src="js/jquery.color.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- <script src="js/html5slider.js"></script> --> 
 

 
    <script src="js/skynet.js"></script> 
 
    <script src="js/articles.js"></script> 
 
    <script src="js/bubbles.js"></script> 
 
    <script src="js/tickbox.js"></script> 
 
    <script src="js/userstudy.js"></script> 
 
    <script src="js/basket.js"></script> 
 

 
    <script> 
 
     // LET'S TRY TO HACK SLOW INTERNET RELOAD BUGS 
 
     //$(document).ready(function() { 
 
     $(window).load(function() { 
 
     window.isCrossSite = true; 
 
     skynetInit() 
 
     initBubbles(d3.select('#skynet-bubbles')) 
 
     initTickbox(d3.select('#skynet-tickbox')) 
 
     initUserstudy() 
 

 

 
     if("debug" in getURLparams(document.location)) { 
 
     if(localStorage.current_json) { 
 
      loadJson(JSON.parse(localStorage.current_json)); 
 
     } 
 
     } 
 
     }) 
 
    </script> 
 

 
    <link rel="stylesheet" type="text/css" href="css/skynet.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/articles.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/bubbles.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/tickbox.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/userstudy.css"> 
 
    </head> 
 

 
    <body style="width: 500px; 
 
    height: 300px; 
 
    text-align: center;"> 
 
    <form id="skynet-search" style="overflow: hidden; height: 20px; background-color: rgba(255, 255, 255, 0);"> 
 
     <h1></h1> 
 

 
     <p class="search"> 
 
     <input type="search" id="skynet-query" name="q" placeholder="scientific search" autofocus=""> 
 
     <input type="submit" id="skynet-submit" value="Enter"> 
 
     <img class="loader skynet-loading" src="img/ajax-loader.gif" alt="igniting search..." style="display: none;"> 
 
     </p> 
 

 
     <section class="options"> 
 
     <p id="skynet-reranker"> 
 
      using <a href="https://wiki.hiit.fi/display/focusarea/DK-Reranker+Interface">reranker</a> 
 
      <input type="radio" id="skynet-reranker-plain" name="reranker" value="plain"> 
 
      <label for="skynet-reranker-plain">no-drift</label> 
 
      <input type="radio" id="skynet-reranker-drift" name="reranker" value="drift"> 
 
      <label for="skynet-reranker-drift">drift</label> 
 
      <input type="radio" id="skynet-reranker-none" name="reranker" value="none"> 
 
      <label for="skynet-reranker-none">drift,no-rerank</label> 
 
      <input type="radio" id="skynet-reranker-partial" name="reranker" value="partial"> 
 
      <label for="skynet-reranker-partial">partial drift (testing)</label> 
 
      <input type="radio" id="skynet-reranker-partial" name="reranker" checked="" value="layout"> 
 
      <label for="skynet-reranker-partial">new layout (testing)</label> 
 
     </p> 
 
     <p>articles <input type="range" id="skynet-article-count" name="article-count" value="50" min="5" max="100"><span>50</span></p> 
 
     <p class="stash">keywords <input type="range" id="skynet-keyword-count" name="kw-count" value="10" min="1" max="20"><span>10</span></p> 
 
     <p id="dead-keywords" class="stash"> 
 
      <label for="keep-dead-keywords">keep dead keywords</label> 
 
      <input type="checkbox" id="keep-dead-keywords" name="keep-dead-keywords"> 
 
     </p> 
 
     <p id="update-brain" class="brain stash"> 
 
      <label for="update-after-drag">update immediately after drag</label> 
 
      <input type="checkbox" id="update-after-drag" name="update-after-drag" checked=""> 
 
     </p> 
 
     <p> 
 
      <label for="angular-distortion">use angular distortion</label> 
 
      <input type="checkbox" id="angular-distortion" name="angular-distortion"> 
 
     </p><p>exploration rate<input type="range" id="skynet-exploration-rate" name="exploration-rate" value="2" min="0" max="5" step="0.1"><span>2</span></p> 
 
     <p>outer ring width<input type="range" id="skynet-outer-width" name="outer-width" value="80" min="5" max="150"><span>80</span></p> 
 
     <p>view sector from angle<input type="range" id="skynet-view-sector-start" name="view-sector-start" value="15" min="0" max="360" step="5"><span>15</span></p> 
 
     <p>to angle<input type="range" id="skynet-view-sector-end" name="view-sector-end" value="345" min="0" max="360" step="5"><span>345</span></p> 
 

 
     </section> 
 
    </form> 
 

 
    <svg id="skynet-bubbles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1150" height="1100"> 
 
     <defs> 
 
     <filter id="desaturate"> 
 
      <feColorMatrix type="saturate" values="0"></feColorMatrix> 
 
     </filter> 
 
     <filter id="brainboom"> 
 
      <!-- COLORIFY #f70 --> 
 
      <feColorMatrix type="matrix" values="1 0 0 0 0 
 
               0 0.5 0 0 0 
 
               0 0 0 0 0 
 
               0 0 0 1 0"></feColorMatrix> 
 
     </filter> 
 
     </defs> 
 
    <g transform="translate(100,50)"><g id="background"><path class="center" d="M0,450A450,450 0 1,1 0,-450A450,450 0 1,1 0,450M0,100A100,100 0 1,0 0,-100A100,100 0 1,0 0,100Z" transform="translate(500,500)"></path><image id="megaupload" class="loader keywords-loading" xlink:href="img/ajax-loader-48.gif" alt="updating keywords..." width="32" height="32" x="484" y="484" style="display: none;"></image></g><g id="2457-HCI-user-human-computer-interaction" angle="0.004347376039567533" class="bubble" transform="translate(366.28110686791274,749.4023528092691)"><title>user-human-computer-interaction</title><circle r="70.359375"></circle><rect rx="5" ry="5" style="opacity:0" x="-65.359375" y="-65" width="130.71875" height="120"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-36">user</tspan><tspan x="0" y="-12">human</tspan><tspan x="0" y="12">computer</tspan><tspan x="0" y="36">interaction</tspan></text></g><g id="2595-HCI-user-usability" angle="0.004347376039567533" class="bubble" transform="translate(395.0571296029419,886.5611694910685)"><title>user-usability</title><circle r="58.3515625"></circle><rect rx="5" ry="5" style="opacity:0" x="-53.3515625" y="-41" width="106.703125" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">user</tspan><tspan x="0" y="12">usability</tspan></text></g><g id="2553-HCI-user-design" angle="0.004347376039567533" class="bubble" transform="translate(494.6977399531702,773.8269295427324)"><title>user-design</title><circle r="50.359375"></circle><rect rx="5" ry="5" style="opacity:0" x="-45.359375" y="-41" width="90.71875" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">user</tspan><tspan x="0" y="12">design</tspan></text></g><g id="3369-HCI-user-experience" angle="0.004347376039567533" class="bubble" transform="translate(301.7254229002683,483.7958257430109)"><title>user-experience</title><circle r="73.703125"></circle><rect rx="5" ry="5" style="opacity:0" x="-68.703125" y="-41" width="137.40625" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">user</tspan><tspan x="0" y="12">experience</tspan></text></g><g id="1503-HCI-user-fun" angle="0.004347376039567533" class="bubble" transform="translate(503.85718782559803,875.5925072235884)"><title>user-fun</title><circle r="41"></circle><rect rx="5" ry="5" style="opacity:0" x="-33.34375" y="-41" width="66.6875" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">user</tspan><tspan x="0" y="12">fun</tspan></text></g><g id="4935-HCI-user-enjoyment" angle="0.004378240237098398" class="bubble" transform="translate(533.3094874647468,289.3257316478261)"><title>user-enjoyment</title><circle r="70.359375"></circle><rect rx="5" ry="5" style="opacity:0" x="-65.359375" y="-41" width="130.71875" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">user</tspan><tspan x="0" y="12">enjoyment</tspan></text></g><g id="1103-ip-ip-TCP" angle="0.004378240237098398" class="bubble" transform="translate(591.4440990296514,804.0571281169257)"><title>ip-TCP</title><circle r="41"></circle><rect rx="5" ry="5" style="opacity:0" x="-34" y="-41" width="68" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">ip</tspan><tspan x="0" y="12">TCP</tspan></text></g><g id="4408-service-ecosystem-service-design" angle="0.004378240237098398" class="bubble" transform="translate(606.7447011482009,906.9333480894975)"><title>service-design</title><circle r="53.0078125"></circle><rect rx="5" ry="5" style="opacity:0" x="-48.0078125" y="-41" width="96.015625" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">service</tspan><tspan x="0" y="12">design</tspan></text></g><g id="2408-service-ecosystem-trust" angle="0.004409104434629262" class="bubble" transform="translate(682.0334610339107,838.9444695388529)"><title>trust</title><circle r="38.3359375"></circle><rect rx="5" ry="5" style="opacity:0" x="-33.3359375" y="-29" width="66.671875" height="48"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="0">trust</tspan></text></g><g id="3196-ip-ip-management" angle="0.004409104434629262" class="bubble" transform="translate(735.0502666577346,718.5593848820793)"><title>ip-management</title><circle r="85.0390625"></circle><rect rx="5" ry="5" style="opacity:0" x="-80.0390625" y="-41" width="160.078125" height="72"></rect><text text-anchor="middle" style="font-size:24" alignment-baseline="middle"><tspan x="0" y="-12">ip</tspan><tspan x="0" y="12">management</tspan></text></g></g></svg> 
 

 

 
    <!-- <section id="articles"> --> 
 
    <!-- <p class="thicker">You clicked Total Elements:</p> --> 
 
     <!-- <h2>Articles 
 
     <small> 
 
      [<a href="javascript:toggleBasket()"><span class="toggle">show</span> bookmarked (<span class="count">0</span>)</a>] 
 
     </small> 
 
     </h2> 
 

 
     <ul id="article-basket"> 
 
     <li class="debug" id="article-in-basket-unique-article-id"> 
 
      <input type="checkbox" id="un-basket-unique-article-id" name="article-un-basket" value="unique-article-id" /> 
 
      Title of supreme article 
 
     </li> 
 
     <li class="debug" id="article-in-basket-unique-article-id2"> 
 
      <input type="checkbox" id="un-basket-unique-article-id" name="article-un-basket" value="unique-article-id" /> 
 
      Other article about the BORGS 
 
     </li> 
 
     </ul> 
 

 
     <article id="unique-article-id" class="debug new"> 
 
     <h3> 
 
      <input type="checkbox" id="to-basket-unique-article-id" name="article-to-basket" value="unique-article-id" /> 
 
      <span class="rank">new</span> 
 
      <span class="rank up">↑ 9</span> 
 
      <span class="rank down">↓ 2</span> 
 
      Title of supreme article 
 
     </h3> 
 
     <address class="authors">Authors of your article</address> 
 
     <!--time datetime"2012-01-02">2012-01-02</time--> 
 
     <!-- <p class="keywords"> 
 
      <a href="javascript:enterBubble('nuggets', 1)" class="keyword-nuggets">nuggets</a> 
 
      <a href="javascript:enterBubble('poop', 1)" class="keyword-poop">poop</a> 
 
     </p> 
 
     <p class="abstract">Abstract with lots of text making little sense to human.</p> --> 
 
     <!-- </article> --> 
 
    <!-- </section> --> 
 

 
    <form id="skynet-tickbox"> 
 
     <fieldset id="skynet-keywords"> 
 
     <legend>Keyword stash</legend> 
 

 
     
 

 
     
 

 
     <section><input type="checkbox" id="keyword-userhumancomputerinteraction" name="keyword" value="user-human-computer-interaction"><label for="keyword-userhumancomputerinteraction">user-human-computer-interaction</label></section><section><input type="checkbox" id="keyword-userusability" name="keyword" value="user-usability"><label for="keyword-userusability">user-usability</label></section><section><input type="checkbox" id="keyword-userdesign" name="keyword" value="user-design"><label for="keyword-userdesign">user-design</label></section><section><input type="checkbox" id="keyword-userexperience" name="keyword" value="user-experience"><label for="keyword-userexperience">user-experience</label></section><section><input type="checkbox" id="keyword-userfun" name="keyword" value="user-fun"><label for="keyword-userfun">user-fun</label></section><section><input type="checkbox" id="keyword-userenjoyment" name="keyword" value="user-enjoyment"><label for="keyword-userenjoyment">user-enjoyment</label></section><section><input type="checkbox" id="keyword-iptcp" name="keyword" value="ip-TCP"><label for="keyword-iptcp">ip-TCP</label></section><section><input type="checkbox" id="keyword-ipmanagement" name="keyword" value="ip-management"><label for="keyword-ipmanagement">ip-management</label></section><section><input type="checkbox" id="keyword-servicedesign" name="keyword" value="service-design"><label for="keyword-servicedesign">service-design</label></section><section><input type="checkbox" id="keyword-trust" name="keyword" value="trust"><label for="keyword-trust">trust</label></section><input type="submit" id="keywords-submit" value="Update selected to 1"> 
 
     <img class="loader keywords-loading" src="img/ajax-loader.gif" alt="igniting search..." style="display: none;"> 
 
     </fieldset> 
 
    </form> 
 

 
    <!--form id="userstudy-alldone"> 
 
     <input type="submit" id="alldone-submit" value="ALL DONE" /> 
 
    </form--> 
 

 
    
 

 

 

 
<script> 
 
function showCoords(event) { 
 
    var cX = event.clientX; 
 
    var sX = event.screenX; 
 
    var cY = event.clientY; 
 
    var sY = event.screenY; 
 
    var coords1 = "client - X: " + cX + ", Y coords: " + cY; 
 
    var coords2 = "screen - X: " + sX + ", Y - coords: " + sY; 
 
    alert(coords2); 
 
} 
 
</script> 
 
</body></html>

function showCoords(event) { 
 
    var cX = event.clientX; 
 
    var sX = event.screenX; 
 
    var cY = event.clientY; 
 
    var sY = event.screenY; 
 
    var coords1 = "client - X: " + cX + ", Y coords: " + cY; 
 
    var coords2 = "screen - X: " + sX + ", Y coords: " + sY; 
 
    alert(coords2); 
 
}

У меня есть этот код, когда я нажимаю на элемент он работает отлично, но когда я пытаюсь вызвать щелчок от jQuery или javascript, он возвращает мне undefined для screenX и screenY. Как я могу сделать этот триггер таким образом, чтобы он дал мне точные кориндаты.

источник

2016-05-26 Hassan Abbas

или показать хотя бы весь соответствующий код. Например, как вы регистрируете прослушиватель событий и как вы пытаетесь вызвать клик. – Thomas

Оформить заказ на эти коды. как о создании функции и вызова его на элемент нажмите

function pointerPos(event){ 
    var cX = event.clientX; 
    var sX = event.screenX; 
    var cY = event.clientY; 
    var sY = event.screenY; 
    var coords1 = "client - X: " + cX + ", Y coords: " + cY; 
    var coords2 = "screen - X: " + sX + ", Y coords: " + sY; 
    alert(coords1); 
}; 
$('a').on('click', function(){ 
    pointerPos(event); 
}); 
$('button').on('click', function(){ 
    pointerPos(event); 
});

Проходя же функцию на кнопку и <a> тоже.

Пример: https://jsfiddle.net/h7hypxa0/1/

источник

2016-05-26 11:05:00

Когда я нажимаю на тег привязки, он дает мне неопределенные корни в коде скрипта, который вы указали. –

В вашем коде, если я делаю что-то вроде $ ('a'). Trigger («click»), такая же ошибка возникает так технически, что вы не программно запускаете клики. Это проблема, которую я испытываю. Посмотрите на код скрипки https://jsfiddle.net/h7hypxa0/3/ –

Это произойдет, потому что при нажатии вы получаете координаты, которые зависят от курсора мыши, но если вы запустите, то он не получит никакого положения мыши. –

Вы можете попробовать так:

window.onload = function() { 
     document.getElementById('4935-HCI-user-enjoyment').onclick = function() { 
     showCoords(event); 
    } 

    function showCoords(event) { 
     var cX = event.clientX; 
     var sX = event.screenX; 
     var cY = event.clientY; 
     var sY = event.screenY; 
     var coords1 = "client - X: " + cX + ", Y coords: " + cY; 
     var coords2 = "screen - X: " + sX + ", Y coords: " + sY; 
     alert(coords2); 
    } 
}

или вы можете вызвать его из самого элемента управления путем добавления OnClick к нему атрибут, как это:

<g id='4935-HCI-user-enjoyment' onclick="showCoords(event)">

источник

2016-05-26 11:36:29 sumngh

Это элементы d3 и не загружаются в window.onload, они появляются после того, как некоторые действия выполняются через javascript. –

Срабатывание Клик с Jquery не работает

ответ

Смежные вопросы