我有一个带有@Click事件的
我正在寻找这样的东西:
$(document).ready(function () {
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
您可以在Vanilla JavaScript中这样做，如下所示:
null
new Vue({
el: "#app",
methods:{
drawDot(){
mouseX = event.pageX;
mouseY = event.pageY
console.log(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
var div = document.createElement("div");
div.style.position='absolute';
div.style.top=mouseY + 'px';
div.style.left=mouseX + 'px';
div.style.width=size;
div.style.height=size;
div.style.backgroundColor=color;
document.body.appendChild(div)
}
}
});.draw{
background: white;
width: 50vw;
height: 50vw;
border-style: solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="draw" @click="drawDot"></div>
</div>