Method and device for automatically optimizing and calculating popup window display position according to mouse click position

Abstract

The embodiment of the invention provides a method and device for automatically optimizing and calculating a popup display position according to a mouse click position and electronic equipment, and belongs to the technical field of data processing.The method comprises the steps that a dom container trap is defined, and a reserved operation button btn is created in the trap; the method comprises the following steps: adding a css style position: position to a trap, and adding a click event to a button btn; in a click event of btn, the distances btnLeft, btnRight, btnTop and btnBottom from a reserved button to the periphery of a visual area are obtained through a getBoundClientRect method provided by js, calculation is conducted through the obtained btnLeft, btnRight, btnTop, btnBottom, width, height, W and H in a setTimeout method, calculated position information PI and visibilities: visibles are combined into a sample object styleObj, and the style object styleObj is applied to a drop down Wrap through the attribute of the style. The method can improve the calculation flexibility of the pop-up window position.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method, device and electronic device for automatically optimizing and calculating a pop-up window display position according to a mouse click position. Background Art

[0002] Calculating the display position of pop-up windows is a front-end development technology that aims to ensure that pop-up windows (such as drop-down menus, tooltips, etc.) can automatically adjust their display position when the user clicks a button or element to avoid the pop-up window partially or completely exceeding the visible area, thereby providing a better user experience. The core of this technology is to dynamically calculate the optimal display position of the pop-up window, making it as close as possible to the user's click position while ensuring that the pop-up window is fully visible.

[0003] The prior art has the following defects when calculating the pop-up window display position:

[0004] 1. Performance overhead: Frequent DOM operations and style calculations may lead to degraded page performance, especially on mobile devices.

[0005] 2. Cross-browser compatibility: Different browsers support CSS and JavaScript to different degrees, which may cause some functions to not work properly in some browsers.

[0006] 3. Complexity of responsive design: On different screen sizes and devices, the display position and size of the pop-up window need to be dynamically adjusted, which increases the complexity of the layout.

[0007] 4. Handling of boundary conditions: In some special cases, such as when the button is close to the edge of the screen or the pop-up window has a lot of content, the calculated position may still cause the pop-up window to partially or completely exceed the visible area.

[0008] 5. Impact of dynamic content: If the pop-up content is dynamically generated, its size may change, resulting in inaccurate position calculation.

[0009] 6. Complexity of user interaction: Users may perform multiple interactions after the pop-up window is displayed, such as scrolling the page or clicking other buttons. It is necessary to ensure that the position of the pop-up window remains correct.

[0010] The above problems become technical problems that need to be solved. Summary of the invention

[0011] In view of this, embodiments of the present invention provide a method, device and electronic device for automatically optimizing and calculating a pop-up window display position according to a mouse click position, which at least partially solves the problems existing in the prior art.

[0012] In a first aspect, an embodiment of the present invention provides a method for automatically optimizing and calculating a pop-up window display position according to a mouse click position, comprising:

[0013] Define the DOM container wrap, create a reserved operation button btn in wrap, and create a pop-up window dropdownWrap at the same level as the operation button in wrap;

[0014] Add the CSS style position:relation to wrap, add a click event to the button btn, and set the CSS style for the pop-up window dropdownWrap: position:absolute; visibility:hidden;

[0015] In the click event of btn, getBoundingClientRect method provided by js is used to obtain the distance of reserved buttons from the visible area around btnLeft, btnRight, btnTop, btnBottom, and the width W and height H of the visible area are obtained through documentElemenclientWidth and documentElemenclientHeight, and dropdownWrap is set to load at the same time;

[0016] Get the DOM of dropdownWrap and get the width and height of dropdownWrap through the clientHeight and clientWidth methods;

[0017] In the setTimeout method, the obtained btnLeft, btnRight, btnTop, btnBottom, width, height, W and H are used for calculation. If W-btnRight is less than width, right:0 is set; if W-btnLeft is greater than widht, left:0 is set; if H-btnTop is greater than height, top:-height is set; if H-btnBottom is greater than height, bottom:-height is set, so as to calculate the position information PI = [right, left, top, bottom] of dropdownWrap, combine the calculated position information PI with visibility: visible into a style object styleObj, and apply the style object styleObj to the pop-up window dropdownWrap through the style attribute.

[0018] According to a specific implementation of an embodiment of the present invention, the definition of the DOM container wrap, creating a reserved operation button btn in the wrap, and creating a pop-up window dropdownWrap at the same level of the operation button in the wrap includes:

[0019] Create a new div element at the preset position in the HTML document and assign a unique IDwrap to the newly created div element;

[0020] Set CSS styles for wrap using inline styles, internal style sheets, or external style sheets;

[0021] Create a button element inside the wrap container and add text or icon to the button element.

[0022] According to a specific implementation of an embodiment of the present invention, the method of defining a DOM container wrap, creating a reserved operation button btn in the wrap, and creating a pop-up window dropdownWrap at the same level as the operation button in the wrap, further includes:

[0023] Inside wrap, create a new div element dropdownWrap immediately after the button btn;

[0024] Set the position property of dropdownWrap to absolute.

[0025] According to a specific implementation of an embodiment of the present invention, adding a CSS style position:relation to wrap, adding a click event to the button btn, and setting a CSS style for the pop-up window dropdownWrap includes:

[0026] Directly add position:relative to the style attribute of the wrap element;

[0027] Create a section in your HTML document <style>标签，在<style>标签内定义一个CSS规则，选择器为wrap，并设置position:relative；

[0028] 直接在按钮btn元素的onclick属性中添加一个JavaScript函数调用，在HTML文档的<script>标签中，通过选择器获取按钮btn元素；

[0029] 使用onclick属性为按钮btn设置一个JavaScript函数。

[0030] 根据本发明实施例的一种具体实现方式，所述给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式，还包括：

[0031] 将dropdownWrap的position属性设置为absolute，使dropdownWrap相对于最近的已定位祖先元素进行定位；

[0032] 将dropdownWrap的visibility属性设置为hidden，为dropdownWrap添加边框样式，设置border-radius属性，使弹窗的边角呈现圆角效果；

[0033] 使用box-shadow属性为dropdownWrap添加阴影效果，为dropdownWrap设置内边距和外边距。

[0034] 根据本发明实施例的一种具体实现方式，所述在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，包括：

[0035] 使用JavaScript选择器getElementById获取按钮btn的DOM元素；

[0036] 在点击事件处理函数中，调用按钮btn的getBoundingClientRect方法，获取一个包含按钮位置信息的对象；

[0037] 从返回的对象中提取按钮距离可视区域左边的距离、右边的距离、顶部的距离和底部的距离；

[0038] 使用documendocumentElemenclientWidth获取可视区域的宽度，使用documendocumentElemenclientHeight获取可视区域的高度；

[0039] 计算按钮距离可视区域左边的距离btnLeft，通过可视区域的宽度减去按钮的右边距离得到按钮距离可视区域右边的距离btnRight；

[0040] 计算按钮距离可视区域顶部的距离btnTop，通过可视区域的高度减去按钮的底部距离得到按钮距离可视区域底部的距离btnBottom。

[0041] 根据本发明实施例的一种具体实现方式，所述获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height，包括：

[0042] 使用选定的选择器方法获取dropdownWrap的DOM元素；

[0043] 创建计算函数，该计算函数将在需要时获取dropdownWrap的宽度和高度，在获取尺寸的计算函数中，调用dropdownWrap的clientWidth方法，获取其宽度值，将获取到的宽度值存储在变量width中；

[0044] 在获取尺寸的计算函数中，调用dropdownWrap的clientHeight方法，获取其高度值，将获取到的高度值存储在变量height中。

[0045] 根据本发明实施例的一种具体实现方式，所述将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上，包括：

[0046] 在JavaScript中创建一个空对象styleObj，用于存储样式属性，将计算出right、left、top、bottom四个值存储在一个对象中；

[0047] 通过判断位置信息中的值会不会导致弹窗部分或全部超出可视区域，对位置信息中包含的数值进行有效性检验；

[0048] 将位置信息PI中的right值、left值、top值以及bottom值赋给styleObj，将styleObj的visibility属性设置为visible；

[0049] 使用JavaScript选择器getElementById获取弹窗dropdownWrap的DOM元素，判断获取到的dropdownWrap元素是否为null，进而确定dropdownWrap元素是否存在于DOM中，如果不存在，则进一步使用if(dropdownWrap＝null){thrownewError('Dropdownelementnotfound')；}来检查元素是否存在；

[0050] 使用for(constkeyinstyleObj){if(styleObhasOwnProperty(key)){ / *应用样式* / }}来遍历对象的属性，逐个访问样式对象中的每个属性，并将其应用到弹窗元素上。

[0051] 第二方面，本发明实施例提供了一种根据鼠标点击位置自动优化计算弹窗显示位置的装置，包括：

[0052] 定义模块，定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap；

[0053] 添加模块，给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式：position:absolute；visibility:hidden；

[0054] 加载模块，在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，通过documendocumentElemenclientWidth和documendocumentElemenclientHeight获取可视区域的宽W和高H，同时设置加载dropdownWrap；

[0055] 获取模块，获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height；

[0056] 应用模块，在setTimeout方法中用获取的btnLeft、btnRight、btnTop、btnBottom、width、height、W和H进行计算，如果W-btnRight小于width则设置right:0，如果W-btnLeft大于widht则设置left:0，如果H-btnTop大于height则设置top:-height，如果H-btnBottom大于height则设置bottom:-height，从而计算出dropdownWrap的位置信息PI＝[right,left,top,bottom]，将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上。

[0057] 第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

[0058] 至少一个处理器；以及，

[0059] 与该至少一个处理器通信连接的存储器；其中，

[0060] 该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的根据鼠标点击位置自动优化计算弹窗显示位置的方法。

[0061] 第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的根据鼠标点击位置自动优化计算弹窗显示位置的方法。

[0062] 第五方面，本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的根据鼠标点击位置自动优化计算弹窗显示位置的方法。

[0063] 本发明实施例中的根据鼠标点击位置自动优化计算弹窗显示位置的方案，包括：定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap；给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式：position:absolute；visibility:hidden；在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，通过documendocumentElemenclientWidth和documendocumentElemenclientHeight获取可视区域的宽W和高H，同时设置加载dropdownWrap；获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height；在setTimeout方法中用获取的btnLeft、btnRight、btnTop、btnBottom、width、height、W和H进行计算，如果W-btnRight小于width则设置right:0，如果W-btnLeft大于widht则设置left:0，如果H-btnTop大于height则设置top:-height，如果H-btnBottom大于height则设置bottom:-height，从而计算出dropdownWrap的位置信息PI＝[right,left,top,bottom]，将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上。本方案提高了显示弹窗位置的灵活性。附图说明

[0064] 为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

[0065] 图1为本发明实施例提供的一种根据鼠标点击位置自动优化计算弹窗显示位置的方法流程示意图；

[0066] 图2为本发明实施例提供的另一种根据鼠标点击位置自动优化计算弹窗显示位置的方法流程示意图；

[0067] 图3为本发明实施例提供的根据鼠标点击位置自动优化计算弹窗显示位置的装置结构示意图；

[0068] 图4为本发明实施例提供的电子设备示意图。具体实施方式

[0069] 下面结合附图对本发明实施例进行详细描述。

[0070] 以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

[0071] 需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及 / 或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其它方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及 / 或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其它结构及 / 或功能性实施此设备及 / 或实践此方法。

[0072] 还需要说明的是，以下实施例中所提供的图示仅以示意方式说明本公开的基本构想，图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

[0073] 另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。

[0074] 本公开实施例提供一种根据鼠标点击位置自动优化计算弹窗显示位置的方法。本实施例提供的根据鼠标点击位置自动优化计算弹窗显示位置的方法可以由一计算装置来执行，该计算装置可以实现为软件，或者实现为软件和硬件的组合，该计算装置可以集成设置在服务器、终端设备等中。

[0075] 参见图1及图2，本公开实施例提供了一种根据鼠标点击位置自动优化计算弹窗显示位置的方法，包括：

[0076] S101，定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap。

[0077] 定义DOM容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap，这一过程涉及到HTML结构的构建和DOM元素的创建与管理，确保各个元素在页面中正确布局和交互，通过这种方式可以实现一个灵活且响应式的弹窗显示机制。

[0078] 首先，可以在HTML文档中选择一个合适的位置，创建一个div元素作为主容器wrap，并为其分配一个唯一的ID，例如wrap，这个容器将作为后续操作的主要基础结构，接下来，在wrap内部创建一个按钮元素btn，通常是一个button标签或者带有点击事件的div、span等标签，给按钮元素添加适当的文本或图标，以向用户提供明确的操作指示，同时为按钮元素设置一个唯一的ID，例如btn，方便通过JavaScript对其进行控制，为了确保布局正确，需要给wrap设置position:relative，这允许内部元素使用绝对定位。

[0079] 给按钮btn添加点击事件监听器，准备在用户点击按钮时执行相应的逻辑，然后，在wrap内部，紧接在按钮btn后面的位置创建一个新的div元素，该元素将用作弹窗dropdownWrap，并为其分配一个独特的ID，例如dropdownWrap，以便通过JavaScript进行引用和操作，给dropdownWrap设置基础样式，如背景色、边框、内边距、字体颜色等，以提高用户的交互体验，可选地，可以为按钮添加悬停效果或点击效果，增强界面的互动性。

[0080] 可以将dropdownWrap的position属性设置为absolute，使其可以相对于其最近的已定位祖先元素进行定位，即本例中的wrap，初始状态下，将dropdownWrap的visibility属性设置为hidden，使其默认不可见，这样就完成了DOM容器wrap、操作按钮btn和弹窗dropdownWrap的基本结构构建，为后续的弹窗显示逻辑和样式动态调整打下了坚实的基础。

[0081] S102，给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式：position:absolute；visibility:hidden。

[0082] 首先，需要为DOM容器wrap添加CSS样式position:relative。这是因为在wrap内部创建的弹窗dropdownWrap将使用绝对定位(position:absolute)，而绝对定位的元素会相对于其最近的已定位祖先元素进行定位。通过将wrap的position属性设置为relative，可以确保dropdownWrap能够相对于wrap进行定位，而不是相对于整个页面或其他祖先元素。这样做不仅提高了布局的灵活性，还使得位置计算更加直观和可控。此外，position:relative不会改变wrap在页面中的位置，只是为其内部的绝对定位元素提供了一个参考点，这对于保持页面布局的稳定性非常重要。

[0083] 接下来，需要为按钮btn添加点击事件。这一步骤是为了确保用户点击按钮时，能够触发弹窗dropdownWrap的显示逻辑。在JavaScript中，可以通过多种方式为按钮添加点击事件监听器，例如使用addEventListener方法。首先，使用JavaScript选择器(如getElementById或querySelector)获取按钮btn的DOM元素。然后，定义一个点击事件处理函数，在该函数中执行弹窗显示的逻辑，例如计算弹窗的最佳显示位置并设置相应的样式属性。通过这种方式，可以确保每次用户点击按钮时，弹窗都能正确显示在期望的位置。此外，还可以在点击事件处理函数中添加其他逻辑，例如关闭其他已经打开的弹窗，以确保只有一个弹窗在任何时候显示，提高用户体验。

[0084] 最后，需要为弹窗dropdownWrap设置CSS样式，包括position:absolute和visibility:hidden。设置position:absolute使得dropdownWrap能够相对于其最近的已定位祖先元素(即wrap)进行定位，这样可以确保弹窗能够在页面中灵活移动，而不受其他元素的影响。同时，设置visibility:hidden使得弹窗在初始状态下不可见，只有在用户点击按钮时才会通过JavaScript动态设置为visible，从而显示出来。这样做不仅可以提高页面的初始加载速度，还能避免不必要的DOM重绘和重排，提升性能。此外，还可以为dropdownWrap设置其他样式属性，如背景颜色、边框、内边距等，以确保弹窗的外观符合设计要求。通过这些步骤，可以确保弹窗在用户点击按钮时能够正确显示，并且在页面中具有良好的布局和交互效果。

[0085] S103，在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，通过documendocumentElemenclientWidth和documendocumentElemenclientHeight获取可视区域的宽W和高H，同时设置加载dropdownWrap。

[0086] 在按钮btn的点击事件中，首先需要通过JavaScript提供的getBoundingClientRect方法获取按钮距离可视区域四周的距离。getBoundingClientRect方法返回一个包含元素位置信息的对象，包括top、left、right和bottom属性，这些属性分别表示元素距离视口顶部、左侧、右侧和底部的距离。通过这些属性，可以计算出按钮距离可视区域四周的距离。具体来说，btnLeft可以通过btnRect.left获得，btnRight可以通过btnRect.right获得，btnTop可以通过btnRect.top获得，btnBottom可以通过btnRect.bottom获得。这些距离值将用于后续计算弹窗的最佳显示位置，确保弹窗不会超出可视区域。

[0087] 接下来，需要获取可视区域的宽度和高度。这可以通过document.documentElement.clientWidth和document.documentElement.clientHeight来实现。clientWidth和clientHeight属性分别表示视口的宽度和高度，不包括滚动条。获取这些值的原因是，需要知道视口的尺寸，以便在计算弹窗位置时进行边界检查。例如，如果按钮靠近视口的右侧，需要确保弹窗不会超出右侧边界。同样，如果按钮靠近视口的底部，也需要确保弹窗不会超出底部边界。通过获取视口的宽度和高度，可以更精确地计算弹窗的最佳显示位置，避免弹窗部分或全部超出可视区域，从而提供更好的用户体验。

[0088] 最后，需要在按钮点击事件中设置加载弹窗dropdownWrap。这一步骤包括几个关键步骤：首先，获取dropdownWrap的DOM元素，确保能够对其进行操作。然后，通过clientWidth和clientHeight方法获取dropdownWrap的宽度和高度，这些值将用于后续的位置计算。接下来，根据之前获取的按钮距离可视区域四周的距离和视口的尺寸，计算弹窗的最佳显示位置。例如，如果右侧空间不足，则将弹窗靠右对齐；如果上方空间不足，则将弹窗放在下方。计算完成后，将位置信息(如left、right、top、bottom)和visibility:visible属性组合成一个样式对象，并通过style属性将样式对象应用到dropdownWrap上。这样，当用户点击按钮时，弹窗将根据计算出的最佳位置显示出来，确保弹窗始终完全可见且贴近用户的点击位置。通过这些步骤，可以实现一个灵活且响应式的弹窗显示机制，提供更好的用户体验。

[0089] S104，获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height。

[0090] 首先，需要获取弹窗dropdownWrap的DOM元素。这一步骤是为了确保能够通过JavaScript对其进行操作和样式设置。在HTML文档中，dropdownWrap通常是一个div元素，可以通过其ID或类名来选择它。例如，如果dropdownWrap的ID为dropdownWrap，可以使用document.getElementById('dropdownWrap')来获取该元素。获取DOM元素后，将其存储在一个变量中，例如dropdownWrapElement，以便在后续步骤中引用。确保获取到的元素不是null，这可以通过简单的条件判断来实现，例如if(！dropdownWrapElement){throw newError('Dropdown element not found')；}。这样可以避免在后续操作中出现错误，确保代码的健壮性和可靠性。

[0091] 接下来，需要获取dropdownWrap的宽度和高度。这一步骤是为了确保在计算弹窗的最佳显示位置时，能够考虑到弹窗的实际尺寸，避免弹窗部分或全部超出可视区域。在JavaScript中，可以通过clientWidth和clientHeight方法来获取元素的宽度和高度。clientWidth返回元素的宽度，包括内边距(padding)，但不包括边框(border)、外边距(margin)和滚动条。同样，clientHeight返回元素的高度，包括内边距，但不包括边框、外边距和滚动条。通过这些方法，可以获取到dropdownWrap的准确尺寸。例如，可以使用以下代码获取宽度和高度：

[0092] const width＝dropdownWrapElement.clientWidth；

[0093] const height＝dropdownWrapElement.clientHeight；

[0094] 将获取到的宽度和高度分别存储在变量width和height中，以便在后续的位置计算中使用。这些值将用于确定弹窗是否会在某个方向上超出可视区域，从而调整其显示位置，确保弹窗始终完全可见。

[0095] 最后，需要将获取到的宽度和高度值存储在变量中，并在后续的位置计算中使用这些值。存储这些值的目的是为了在计算弹窗的最佳显示位置时，能够方便地引用它们。例如，假设已经计算出了按钮距离可视区域四周的距离(btnLeft、btnRight、btnTop、btnBottom)以及可视区域的宽度和高度(W、H)，可以使用这些值来计算弹窗的最佳显示位置。具体来说，如果右侧空间不足(即W-btnRight<width)，将弹窗靠右对齐；如果上方空间不足(即btnTop<height)，将弹窗放在下方。通过这种方式，可以确保弹窗始终完全可见且贴近用户的点击位置。此外，这些宽度和高度值还可以用于其他样式设置，例如调整弹窗的布局或添加动画效果。通过这些步骤，可以确保弹窗在用户点击按钮时能够正确显示，并且在页面中具有良好的布局和交互效果。

[0096] S105，在setTimeout方法中用获取的btnLeft、btnRight、btnTop、btnBottom、width、height、W和H进行计算，如果W-btnRight小于width则设置right:0，如果W-btnLeft大于widht则设置left:0，如果H-btnTop大于height则设置top:-height，如果H-btnBottom大于height则设置bottom:-height，从而计算出dropdownWrap的位置信息PI＝[right,left,top,bottom]，将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上。

[0097] 在按钮点击事件中，需要使用setTimeout方法来延迟执行位置计算和样式设置，以确保DOM元素的尺寸和位置信息已经完全加载。首先，获取按钮距离可视区域四周的距离(btnLeft、btnRight、btnTop、btnBottom)，以及可视区域的宽度和高度(W、H)。同时，获取弹窗dropdownWrap的宽度和高度(width、height)。这些值将用于计算弹窗的最佳显示位置。

[0098] 在setTimeout方法中，开始进行位置计算。首先，检查右侧空间是否足够显示弹窗。如果W-btnRight<width，即右侧空间不足，将弹窗靠右对齐，设置right:0。否则，检查左侧空间是否足够显示弹窗。如果W-btnLeft>width，即左侧空间充足，将弹窗靠左对齐，设置left:0。通过这些条件判断，可以确保弹窗在水平方向上始终完全可见。

[0099] 接下来，继续计算弹窗在垂直方向上的位置。首先，检查上方空间是否足够显示弹窗。如果btnTop>height，即上方空间充足，将弹窗放在按钮上方，设置top:-height。否则，检查下方空间是否足够显示弹窗。如果H-btnBottom>height，即下方空间充足，将弹窗放在按钮下方，设置bottom:-height。通过这些条件判断，可以确保弹窗在垂直方向上始终完全可见。

[0100] 通过上述步骤，可以计算出弹窗的最佳显示位置，并将这些位置信息存储在一个数组PI中，例如PI＝[right,left,top,bottom]。这个数组将包含弹窗在水平和垂直方向上的位置信息，用于后续的样式设置。

[0101] 最后，需要将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象应用到弹窗dropdownWrap上。首先，创建一个空对象styleObj，用于存储样式属性。然后，根据计算出的位置信息PI，将相应的样式属性添加到styleObj中。例如，如果right值为0，则设置styleObj.right＝'0px'；如果left值为0，则设置styleObj.left＝'0px'；如果top值为-height，则设置styleObj.top＝'-'+height+'px'；如果bottom值为-height，则设置styleObj.bottom＝'-'+height+'px'。

[0102] 除了位置信息，还需要设置visibility:visible，确保弹窗在应用样式后可见。例如，设置styleObj.visibility＝'visible'。通过这些步骤，可以确保弹窗在用户点击按钮时能够正确显示，并且在页面中具有良好的布局和交互效果。

[0103] 最后，获取弹窗dropdownWrap的DOM元素，并将样式对象styleObj应用到其style属性上。例如，可以使用以下代码：

[0104]

[0105] 通过这些步骤，可以确保弹窗在用户点击按钮时能够根据计算出的最佳位置显示，提供更好的用户体验。

[0106] 根据本发明实施例的一种具体实现方式，弹窗dropdownWrap为日历弹窗，将样式对象styleObj应用到弹窗dropdownWrap上之后，进一步的，在所述弹窗上显示日历相关的聚合信息，该聚合信息可以是日期dt的关联信息(如，全球节假日信息)，具体的，可以包括如下步骤：

[0107] S201，获取预定义的节假日列表Ld，节假日列表Ld包含所有的节假日信息及其对应的日期，对于日历中的每一天dt，执行数据过滤操作，得到日期dt对应的第一信息集合Hd＝F(dt,Ld)，构建与第一信息集合Hd所对应的多维特征向量X和权重矩阵W，基于所述多维特征向量X和权重矩阵W构建针对第一信息集合Hd中元素hi的评价函数r(hi)，基于所述评价函数r(hi)对所述第一信息集合Hd进行排序操作得到第二信息集合Hs，S(Hd)是排序函数。

[0108] 可以构建个性化权重计算公式：

[0109]

[0110] W(hi)是节假日hi的个性化权重，w0是偏置项，wk是第k个特征的权重，fk(hi)是第k个特征函数，将节假日hi映射到其对应的第k个特征值，εk表示随机噪声项，服从均值为0、方差为σk2的正态分布。

[0111] 基于多维特征向量xi和权重矩阵W，构建评价函数r(hi)：

[0112] r(hi)＝xiT*W*xi+b

[0113] 是设定的阈值，b是偏置项

[0114] S202，将所述第二信息集合Hs划分为第二显示信息集合Hsx和第二隐藏信息集合Hsy，通过定制化的渲染函数R(Hs)，将第二显示信息集合Hsx中的节假日名称渲染到界面上的第一显示区域中，并为这第二显示信息集合Hsx中的每个元素绑定响应用户交互动作的点击事件监听器E(h)。

[0115] 可以通过视觉评价函数V(hi)计算节假日名称的渲染值：

[0116] V(hi)＝α·W(hi)+β·P(hi∣U)+γ·g(xi；θ)

[0117] α、β、γ是调整参数，P(hi∣U)是基于预测模型计算得到的用户U对特定节假日hi的兴趣概率，g(xi；θ)是深度神经网络输出，用以根据多维特征向量xi和模型参数θ来预测节假日的吸引力；

[0118]

[0119] P(U|hi)表示针对节假日hi用户U展现出特定行为的概率，P(hi)表示节假日hi出现的先验概率，P(U)表示用户U出现的先验概率；

[0120] g(xi；θ)＝f(W(L)σ(W(L-1)σ(...σ(W(1)xi+b(1))...))+b(L))

[0121] W(l)和b(l)分别是第l层的权重矩阵和偏置向量，σ(·)是激活函数，L是网络的层数，f(·)是最终的输出函数。

[0122] S203，在第一显示区域的下方，显示第二隐藏信息集合Hsy中包含的元素数量ny，通过设置"+n”交互元素向用户发出存在更多节假日的通知，在"+n”交互元素上设置点击事件监听器E(+n)。

[0123] 可以使用布局适应度函数A(D,+n)来调整"+n”的位置，布局适应度函数表示为：

[0124]

[0125] D表示当前显示设备的屏幕区域，∣+n∣表示"+n”元素所代表的隐藏节假日列表中元素的数量，xi和xi-1表示在屏幕宽度方向上相邻位置点的横坐标，yj和yj-1表示在屏幕高度方向上相邻位置点的纵坐标，zk和zk-1表示屏幕显示内容的深度值，λ和η是调整因子，布局适应度函数A(D,+n)的输出值是一个标量单一数值，表示"+n”元素在给定屏幕尺寸D下的布局适应度评分

[0126] S204，当用户点击第一显示区域中的任一节假日hi时，通过窗口定位算法P(Wi│hi)生成节假日hi对应的浮动窗口Wi的显示位置Lci，在所述显示位置Lci展示节假日hi的详细信息，当"+n”元素被点击时，自动关闭浮动窗口Wi。

[0127] 可以设置窗口定位算法，计算节假日hi对应的浮动窗口Wi的显示位置Lci：

[0128]

[0129] Z0是归一化常数，σ0是浮动窗口位置(x,y)相对于用户点击点(x’,y’)的标准偏差。

[0130] S205，用户点击"+n”元素后，通过响应时间函数T(Ln)在"+n”元素的周围呈现包含所有剩余节假日的弹窗列表Ln，T(Ln)＝min{∑|tL＝n1|[τt*exp(-ρ·t)+υ·sin(ωt+φ)]}，t是点击次数，τt是第t次点击的响应时间，ρ是衰减系数，υ是振幅，ω是角频率，φ是相位偏移，为弹窗列表Ln中的每一个节假日项设置独立的点击事件监听器E(hj)，当用户选择弹窗列表Ln中的选项Hli后，在Hli对应的一级窗口基础上进一步弹出二级窗口Wj，展示所选节假日Hli的详细信息。

[0131] 根据本发明实施例的一种具体实现方式，所述定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap，包括：

[0132] 在HTML文档中的预设位置，创建一个新的div元素，给新创建的div元素分配一个唯一的IDwrap；

[0133] 使用内联样式、内部样式表或外部样式表为wrap设置CSS样式；

[0134] 在wrap容器内部创建一个按钮元素，给按钮元素添加文本或图标。

[0135] 根据本发明实施例的一种具体实现方式，所述定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap，还包括：

[0136] 在wrap内部，紧接在按钮btn后面的位置创建一个新的div元素dropdownWrap；

[0137] 将dropdownWrap的position属性设置为absolute。

[0138] 根据本发明实施例的一种具体实现方式，所述给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式，包括：

[0139] 直接在wrap元素的style属性中添加position:relative；

[0140] 在HTML文档的<head>部分创建一个<style>标签，在<style>标签内定义一个CSS规则，选择器为wrap，并设置position:relative；

[0141] 直接在按钮btn元素的onclick属性中添加一个JavaScript函数调用，在HTML文档的<script>标签中，通过选择器获取按钮btn元素；

[0142] 使用onclick属性为按钮btn设置一个JavaScript函数。

[0143] 根据本发明实施例的一种具体实现方式，所述给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式，还包括：

[0144] 将dropdownWrap的position属性设置为absolute，使dropdownWrap相对于最近的已定位祖先元素进行定位；

[0145] 将dropdownWrap的visibility属性设置为hidden，为dropdownWrap添加边框样式，设置border-radius属性，使弹窗的边角呈现圆角效果；

[0146] 使用box-shadow属性为dropdownWrap添加阴影效果，为dropdownWrap设置内边距和外边距。

[0147] 根据本发明实施例的一种具体实现方式，所述在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，包括：

[0148] 使用JavaScript选择器getElementById获取按钮btn的DOM元素；

[0149] 在点击事件处理函数中，调用按钮btn的getBoundingClientRect方法，获取一个包含按钮位置信息的对象；

[0150] 从返回的对象中提取按钮距离可视区域左边的距离、右边的距离、顶部的距离和底部的距离；

[0151] 使用documendocumentElemenclientWidth获取可视区域的宽度，使用documendocumentElemenclientHeight获取可视区域的高度；

[0152] 计算按钮距离可视区域左边的距离btnLeft，通过可视区域的宽度减去按钮的右边距离得到按钮距离可视区域右边的距离btnRight；

[0153] 计算按钮距离可视区域顶部的距离btnTop，通过可视区域的高度减去按钮的底部距离得到按钮距离可视区域底部的距离btnBottom。

[0154] 根据本发明实施例的一种具体实现方式，所述获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height，包括：

[0155] 使用选定的选择器方法获取dropdownWrap的DOM元素；

[0156] 创建计算函数，该计算函数将在需要时获取dropdownWrap的宽度和高度，在获取尺寸的计算函数中，调用dropdownWrap的clientWidth方法，获取其宽度值，将获取到的宽度值存储在变量width中；

[0157] 在获取尺寸的计算函数中，调用dropdownWrap的clientHeight方法，获取其高度值，将获取到的高度值存储在变量height中。

[0158] 根据本发明实施例的一种具体实现方式，所述将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上，包括：

[0159] 在JavaScript中创建一个空对象styleObj，用于存储样式属性，将计算出right、left、top、bottom四个值存储在一个对象中；

[0160] 通过判断位置信息中的值会不会导致弹窗部分或全部超出可视区域，对位置信息中包含的数值进行有效性检验；

[0161] 将位置信息PI中的right值、left值、top值以及bottom值赋给styleObj，将styleObj的visibility属性设置为visible；

[0162] 使用JavaScript选择器getElementById获取弹窗dropdownWrap的DOM元素，判断获取到的dropdownWrap元素是否为null，进而确定dropdownWrap元素是否存在于DOM中，如果不存在，则进一步使用if(dropdownWrap＝null){thrownewError('Dropdownelementnotfound')；}来检查元素是否存在；

[0163] 使用for(constkeyinstyleObj){if(styleObhasOwnProperty(key)){ / *应用样式* / }}来遍历对象的属性，逐个访问样式对象中的每个属性，并将其应用到弹窗元素上。

[0164] 与上面的方法实施例相对应，参见图3，本发明实施例还公开了一种根据鼠标点击位置自动优化计算弹窗显示位置的装置30，包括：

[0165] 定义模块301，定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap；

[0166] 添加模块302，给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式：position:absolute；visibility:hidden；

[0167] 加载模块303，在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，通过documendocumentElemenclientWidth和documendocumentElemenclientHeight获取可视区域的宽W和高H，同时设置加载dropdownWrap；

[0168] 获取模块304，获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height；

[0169] 应用模块305，在setTimeout方法中用获取的btnLeft、btnRight、btnTop、btnBottom、width、height、W和H进行计算，如果W-btnRight小于width则设置right:0，如果W-btnLeft大于widht则设置left:0，如果H-btnTop大于height则设置top:-height，如果H-btnBottom大于height则设置bottom:-height，从而计算出dropdownWrap的位置信息PI＝[right,left,top,bottom]，将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上。

[0170] 参见图4，本发明实施例还提供了一种电子设备60，该电子设备包括：

[0171] 至少一个处理器；以及，

[0172] 与该至少一个处理器通信连接的存储器；其中，

[0173] 该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述方法实施例中根据鼠标点击位置自动优化计算弹窗显示位置的方法。

[0174] 本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述方法实施例中。

[0175] 本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述方法实施例中的根据鼠标点击位置自动优化计算弹窗显示位置的方法。

[0176] 下面参考图4，其示出了适于用来实现本公开实施例的电子设备60的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

[0177] 如图4所示，电子设备60可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM603中，还存储有电子设备60操作所需的各种程序和数据。处理装置601、ROM602以及RAM603通过总线604彼此相连。输入 / 输出(I / O)接口605也连接至总线604。

[0178] 通常，以下装置可以连接至I / O接口605：包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加响应计、陀螺仪等的输入装置606；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备60与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备60，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

[0179] 特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM602被安装。在该计算机程序被处理装置601执行时，执行本公开实施例的方法中限定的上述功能。

[0180] 以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。< / style>

Claims

1. A method for automatically optimizing and calculating a pop-up window display position according to a mouse click position, characterized in that: include: Define the DOM container wrap, create a reserved operation button btn in wrap, and create a pop-up window dropdownWrap at the same level as the operation button in wrap; Add the CSS style position:relation to wrap, add a click event to the button btn, and set the CSS style for the pop-up window dropdownWrap: position:absolute; visibility:hidden; In the click event of btn, getBoundingClientRect method provided by js is used to obtain the distance of reserved buttons from the visible area around btnLeft, btnRight, btnTop, btnBottom, and document.documentElement.clientWidth and document.documentElement.clientHeight are used to obtain the width W and height H of the visible area, and at the same time, set to load dropdownWrap; Get the DOM of dropdownWrap and get the width and height of dropdownWrap through the clientHeight and clientWidth methods; In the setTimeout method, the obtained btnLeft, btnRight, btnTop, btnBottom, width, height, W and H are used for calculation. If W-btnRight is less than width, right:0 is set; if W-btnLeft is greater than widht, left:0 is set; if H-btnTop is greater than height, top:-height is set; if H-btnBottom is greater than height, bottom:-height is set, so as to calculate the position information PI = [right, left, top, bottom] of dropdownWrap, combine the calculated position information PI with visibility: visible into a style object styleObj, and apply the style object styleObj to the pop-up window dropdownWrap through the style attribute.

2. The method according to claim 1, characterized in that The DOM container wrap is defined, a reserved operation button btn is created in the wrap, and a pop-up window dropdownWrap is created at the same level as the operation button in the wrap, including: Create a new div element at the preset position in the HTML document and assign a unique IDwrap to the newly created div element; Set CSS styles for wrap using inline styles, internal style sheets, or external style sheets; Create a button element inside the wrap container and add text or icon to the button element.

3. The method according to claim 2, characterized in that The method of defining the DOM container wrap, creating a reserved operation button btn in the wrap, and creating a pop-up window dropdownWrap at the same level of the operation button in the wrap, also includes: Inside wrap, create a new div element dropdownWrap immediately after the button btn; Set the position property of dropdownWrap to absolute.

4. The method according to claim 3, characterized in that The method of adding the CSS style position:relation to wrap, adding a click event to the button btn, and setting the CSS style for the pop-up window dropdownWrap includes: Directly add position:relative to the style attribute of the wrap element; Create a section in your HTML document <style>标签，在<style>标签内定义一个CSS规则，选择器为wrap，并设置position:relative；直接在按钮btn元素的onclick属性中添加一个JavaScript函数调用，在HTML文档的<script>标签中，通过选择器获取按钮btn元素；使用onclick属性为按钮btn设置一个JavaScript函数。5.根据权利要求4所述的方法，其特征在于，所述给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式，还包括：将dropdownWrap的position属性设置为absolute，使dropdownWrap相对于最近的已定位祖先元素进行定位；将dropdownWrap的visibility属性设置为hidden，为dropdownWrap添加边框样式，设置border-radius属性，使弹窗的边角呈现圆角效果；使用box-shadow属性为dropdownWrap添加阴影效果，为dropdownWrap设置内边距和外边距。6.根据权利要求5所述的方法，其特征在于，所述在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，包括：使用JavaScript选择器getElementById获取按钮btn的DOM元素；在点击事件处理函数中，调用按钮btn的getBoundingClientRect方法，获取一个包含按钮位置信息的对象；从返回的对象中提取按钮距离可视区域左边的距离、右边的距离、顶部的距离和底部的距离；使用document.documentElement.clientWidth获取可视区域的宽度，使用document.documentElement.clientHeight获取可视区域的高度；计算按钮距离可视区域左边的距离btnLeft，通过可视区域的宽度减去按钮的右边距离得到按钮距离可视区域右边的距离btnRight；计算按钮距离可视区域顶部的距离btnTop，通过可视区域的高度减去按钮的底部距离得到按钮距离可视区域底部的距离btnBottom。7.根据权利要求6所述的方法，其特征在于，所述获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height，包括：使用选定的选择器方法获取dropdownWrap的DOM元素；创建计算函数，该计算函数将在需要时获取dropdownWrap的宽度和高度，在获取尺寸的计算函数中，调用dropdownWrap的clientWidth方法，获取其宽度值，将获取到的宽度值存储在变量width中；在获取尺寸的计算函数中，调用dropdownWrap的clientHeight方法，获取其高度值，将获取到的高度值存储在变量height中。8.根据权利要求7所述的方法，其特征在于，所述将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上，包括：在JavaScript中创建一个空对象styleObj，用于存储样式属性，将计算出right、left、top、bottom四个值存储在一个对象中；通过判断位置信息中的值会不会导致弹窗部分或全部超出可视区域，对位置信息中包含的数值进行有效性检验；将位置信息PI中的right值、left值、top值以及bottom值赋给styleObj，将styleObj的visibility属性设置为visible；使用JavaScript选择器getElementById获取弹窗dropdownWrap的DOM元素，判断获取到的dropdownWrap元素是否为null，进而确定dropdownWrap元素是否存在于DOM中，如果不存在，则进一步使用if(dropdownWrap＝null){thrownewError('Dropdownelementnotfound')；}来检查元素是否存在；使用for(constkeyinstyleObj){if(styleObj.hasOwnProperty(key)){ / *应用样式* / }}来遍历对象的属性，逐个访问样式对象中的每个属性，并将其应用到弹窗元素上。9.一种根据鼠标点击位置自动优化计算弹窗显示位置的装置，其特征在于，包括：定义模块，定义dom容器wrap，在wrap中创建预留操作按钮btn，并在wrap里面操作按钮的同级创建弹窗dropdownWrap；添加模块，给wrap添加css样式position:relation，给按钮btn添加点击事件，并为弹窗dropdownWrap设置css样式：position:absolute；visibility:hidden；加载模块，在btn的点击事件中通过js提供的getBoundingClientRect方法获取预留按钮距离可视区域四周的距离btnLeft，btnRight，btnTop，btnBottom，通过document.documentElement.clientWidth和document.documentElement.clientHeight获取可视区域的宽W和高H，同时设置加载dropdownWrap；获取模块，获取dropdownWrap的dom并通过clientHeight和clientWidth方法获取dropdownWrap的宽width和高height；应用模块，在setTimeout方法中用获取的btnLeft、btnRight、btnTop、btnBottom、width、height、W和H进行计算，如果W-btnRight小于width则设置right:0，如果W-btnLeft大于widht则设置left:0，如果H-btnTop大于height则设置top:-height，如果H-btnBottom大于height则设置bottom:-height，从而计算出dropdownWrap的位置信息PI＝[right,left,top,bottom]，将计算出的位置信息PI与visibility:visible组合成一个样式对象styleObj，并通过style属性将样式对象styleObj应用到弹窗dropdownWrap上。10.一种电子设备，其特征在于，所述电子设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行前述权利要求1至8任一项所述的根据鼠标点击位置自动优化计算弹窗显示位置的方法。< / style>

Images