Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to apply mouseover function to component in Svelte

I have the following elements:

Parent.svelte

<script>
    import Child from './Child.svelte';

    function handleMouse(){

    }

</script>

<Child on:mousedown={handleMouseDown} on:mouseover={handleMouse}/>

<div draggable="true" on:mousedown={handleMouseDown} on:mouseover={handleMouse}>Text</div>

Child.svelte

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<div draggable="true">Child text</div>

How can I get the handleMouse() function to work on the child component, when the function is in the parent component?

I can recreate the function inside of the child component, but is there a way to just bind to the parent functions for the child element?

>Solution :

You can forward events from a child component by specifying on: with only the event name, e.g.

<div draggable="true" on:mousedown on:mouseover >Child text</div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading