JS events not firing properly

Describe the bug:
Cursor events in JS do not work properly.

How do you cause this bug?

  • List the steps
    Open my example game called Event issues (owner: Daigoro) and preview the game.
    Click around, try to hold the cursor, try to release it and look into the console.
    Mousedown and mouseup do not work reliably (only on clicks).
    Events are firing not at all or wrong.

Which platform: PC

Which input: keyboard + mouse

Your Crayta username: Daigoro

Game seen in (including “Hub” or “Editor for XYZ”):
Event issues

How regularly do you see this? (E.g. 2/3 times - please try 3 times if possible):
3/3

Version number (found in Help tab in Settings):
0.h2.42.133877

Hey @Ya_shi_shi,

Thanks for the example game. Can I check whether there should be a terrain in it? I made a copy, but ran into some issues copying packages, so I’ve had to grab it without and I load into it falling through empty space. Can you confirm if that’s how it is set up? If not, it’s likely I need to check into why it isn’t copying across right. Cheers!

Oh, i am sorry. Ignore all scripts and packages in this world. Seems like i did not clean the world up properly.
The only relevant widget is the one called “widget”.

Here is the code:

<html>

<head>
	<!-- Required includes -->
	<script type="text/javascript" src="coui://uiresources/js/crayta.js"></script>

	<!-- Set default values to be applied to this widget when it's added to a new entity in the world
    The name/value fields should match the names displayed in the property editor for this widget -->
	<default-asset-properties>
		<default-asset-property name="type" value="Screen"></default-asset-property>
		<default-asset-property name="visible" value="true"></default-asset-property>
	</default-asset-properties>

	<!-- Set some custom properties on this widget, which will appear in the property editor for this widget
	     Custom properties can be used in data bindings using the format {{properties.<<property name>>}} -->
	<properties>
		<property name="signTitle" type="text"></property>
		<property name="signText" type="text"></property>
		
		<property name="titleSize" type="number" default="4"></property>
		<property name="textSize" type="number" default="2"></property>
	</properties>

	<style type="text/css">
		/* Font reference: https://developer.crayta.com/using-fonts-in-crayta/ */
		@font-face {
			font-family: Montserrat;
			src: url('https://content.crayta.com/fonts/Montserrat-Regular.ttf');
			font-weight: 400;
			/* 400 = Regular, 500 = Medium, 600 = Semi-bold, 700 = bold */
		}
		
		body {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.sign {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.75);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 10rem;
			color: white;
		}

		span {
			font-family: Montserrat;
		}
	</style>
</head>

<body>

	<div id="test" class="sign"></div>

	<script>
		var myObj = document.getElementById('test');
		for(var key in myObj){
		    if(key.search('on') === 0) {
		       myObj.addEventListener(key.slice(2), function(e){
		       	console.log(e.type)
		       })
		    }
		}
	</script>
</body>

</html>

It basically listens to all events and prints the event names to the console when they are fired.

Cool, cheers.

1 Like

Accidentally edited my previous reply instead of writing a new one.