jQWidgets jqxDraw off() Method

Last Updated : 29 Jan, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDraw is a small jQuery-based plugin that is used to draw shapes and texts using VML, SVG and HTML5

The off() method is used for removing an event handler from an element of the specified jqxDraw widget.

Syntax:

Instance.off(Element, click, function);

Parameters: This method accepts three parameters that are illustrated below:

Element: This is the specified element.
click: This is the specified event.
function: This is the specified function to remove the event handler.

Return values: This method does not return any values.

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxDraw off() Method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
          "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" src= 
            "scripts/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqxdraw.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3>jQWidgets jqxDraw off() Method</h3> 
        <div id="jqx_Draw" style="height:200px; width:700px;"> 
        </div> 
        <input type="button" id="Button" 
               style="padding:5px 15px; margin-top:40px;" 
               value="Remove the event handler"> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $('#jqx_Draw').jqxDraw(); 
                var Instance = $('#jqx_Draw').jqxDraw('getInstance'); 
  
                // Creating a circle with cx of 130, cy of 50, 
                // radius of 25 and parameters for filling the 
                // circle with green color 
                var Element = Instance.circle(130, 50, 25, { 
                    fill: 'green' 
                }); 
                var moveCircle = function () { 
  
                    // Getting the Y coordinate of the circle's center 
                    var Y_Coordinate = parseInt(Instance.getAttr(Element, 
                        'cy')); 
  
                    // Moving the circle down with 15 pixels 
                    Instance.attr(Element, { 
                        cy: Y_Coordinate + 15 
                    }); 
                }; 
  
                // Adding a event handler 
                Instance.on(Element, 'click', moveCircle); 
                $("#Button").click(function () { 
  
                    // Removing the applied event handler 
                    Instance.off(Element, 'click', moveCircle); 
                    Instance.refresh(); 
                    $("#log").html('Event handler has been removed.'); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>