2
これは私のコードです。私はGUIを整理するために私のカスタムAPIを作っている。私は赤いボタンをクリックするとウィンドウを破壊したいですが、すぐには機能しません。私は別のウィンドウをクリックするとウィンドウが破壊されます。すぐにウィンドウを破棄したい（別のウィンドウをクリックしない）コードを修正するにはどうしたらよいですか？konva js destroy関数がすぐに機能しない
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Drag and Drop Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var window1 = create_window(0, 20, 20, 100, 200, "foo");
var window2 = create_window(0, 200, 20, 100, 200, "bar");
layer.add(window1);
layer.add(window2);
stage.add(layer);
function create_window(ID, Pos_x, Pos_y, W, H, Title) {
var group = new Konva.Group({
x: Pos_x,
y: Pos_y,
rotation: 0,
draggable: true
});
var title = new Konva.Rect({
x: 0,
y: 0,
width: W,
height: 40,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4
});
var simpleText = new Konva.Text({
x: 5,
y: 5,
text: Title,
fontSize: 30,
fontFamily: 'Calibri',
fill: 'black',
align : 'center'
});
var window = new Konva.Rect({
x: 0,
y: 40,
width: W,
height: H - 40,
fill: '#f1ff82',
stroke: 'black',
strokeWidth: 4,
draggable: false
});
var Xbutton = new Konva.Rect({
x: W - 40,
y: H - 40,
width: 40,
height: 40,
fill: '#ff000d',
stroke: 'black',
strokeWidth: 4,
draggable: false
});
group.add(title);
group.add(window);
group.add(simpleText);
group.add(Xbutton);
group.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
group.on('mouseout', function() {
document.body.style.cursor = 'default';
});
Xbutton.on('mouseup', function() {
alert("fasdfadsf");
group.remove();
});
return group;
}
</script>
</body>
</html>