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鼠标事件触发点击时，它返回我未定义的screenX和screenY。我怎样才能使这个触发器能够为我提供准确的证据。
答案 0 :(得分：1)
查看这些代码。如何创建一个函数并在元素单击上调用它
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>上传递相同的功能。
答案 1 :(得分：0)
您可以尝试这样：
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)">