如何在javascript中向前或向后查找用户选择天气？

概述我是javascript的新手.我正在尝试做一个简单的切换div用户选择方向生病放置切换div.经过一些谷歌搜索我发现一个工作小提琴但不如预期看到下面的截图,看看差异当我在段落的前面选择一些文字它工作正常像这样但是,当我从底部段落中选择一些文本时,它没有按预期工作JsFiddle其实我在React版本工作Fiddle在Jquery这是我的代码 impo

我是javascript的新手.我正在尝试做一个简单的切换div用户选择方向生病放置切换div.经过一些谷歌搜索我发现一个工作小提琴但不如预期看到下面的截图,看看差异

当我在段落的前面选择一些文字它工作正常像这样

但是,当我从底部段落中选择一些文本时,它没有按预期工作

JsFiddle

其实我在React版本工作fiddle在Jquery

这是我的代码

    import React from 'react'import {render} from 'react-dom';export default class App extends  React.Component{    constructor(props){        super(props);        this.state = {            display:'none',top:'',bottom:'',left:'',right:'',diplayForDown:'none'        };        this.handleOnMouseDown = this.handleOnMouseDown.bind(this)        this.onMounseUp = this.onMounseUp.bind(this)        this.onMouseDWn = this.onMouseDWn.bind(this)        this.triggerAlltime = this.triggerAlltime.bind(this)    }    handleOnMouseDown(){        let sel = window.getSelection && window.getSelection();        let r = sel.getRangeAt(0).getBoundingClIEntRect();        let relative=document.body.parentNode.getBoundingClIEntRect();        console.log('relative ',relative);    if(!sel.isCollapsed){        console.log(sel,r);        let display = 'block';        let top = (r.bottom - relative.top - 80)+'px';        let bottom = r.bottom+'px';        let left =( r.left)+'px';        let right = (r.right)+'px';        console.log('This is Height',r.bottom-r.top);        let selectionHeight = r.bottom - r.top;        if(selectionHeight => 22.22){            this.setState({                display,top:top,bottom,left,right            })        }else{            this.setState({                display,top,right            })        }    }else{        this.setState({            display:'none'        })    }        console.log('Slected')    }    onMounseUp(e){        e.preventDefault()        let sel = window.getSelection && window.getSelection();        if(!sel.isCollapsed){            console.log('Moved Up')        }    }    onMouseDWn(e){        let sel = window.getSelection && window.getSelection();        if(!sel.isCollapsed){            console.log('Moved Down')        }    }    getSelectionHTML() {        let HTML = "";        if (typeof window.getSelection != "undefined") {            let sel = window.getSelection();            if (sel.rangeCount) {                let container = document.createElement("div");                for (let i = 0,len = sel.rangeCount; i < len; ++i) {                    container.appendChild(sel.getRangeAt(i).cloneContents());                }                HTML = container.INNERHTML;            }        } else if (typeof document.selection != "undefined") {            if (document.selection.type == "Text") {                HTML = document.selection.createrange().HTMLText;            }        }        console.log('HTML',HTML)        return HTML;    }    lastCharRTL(txt) {        return /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]$/.test(txt);    }    triggerAlltime(e){        // console.log('Some Thinms')        if(!window.getSelection().isCollapsed){            //find the Direction Of Slelection            let sel = window.getSelection();            console.log(sel)            let range = document.createrange();            range.setStart(sel.anchorNode,sel.anchorOffset);            range.setEnd(sel.focusNode,sel.focusOffset);            let backwards = range.collapsed;            range.detach();            // get selection rects            let rects = sel.getRangeAt(0).getClIEntRects();            let n = rects.length - 1;            let display = 'block';            console.log(this.lastCharRTL(this.getSelectionHTML()))            if (this.lastCharRTL(this.getSelectionHTML()))                this.setState({                   display:'none',diplayForDown:'none',top: rects[n].top + 10,left: rects[n].left - 10               })            else if (backwards)                this.setState({                    display,top: rects[0].top + -68,left: rects[0].left                })            else                this.setState({                    display:'none',diplayForDown:'block',top: rects[n].top + 40,left: rects[n].right+-160                })        }else{            this.setState({                display:'none',})        }    }    render(){        return(            最佳答案问题是#pointer设置为绝对位置,但是当内容长且可滚动时,顶部距离是从窗口顶部而不是内容顶部计算的.
添加高度：100vh可以解决此问题,但在某些情况下您可能会看到两个滚动条.
另一种方法是在计算指针div的顶部时添加window.pageYOffset.
if (backwards) {    $('#pointer').css({top: rects[0].top + window.pageYOffset + 10,left: rects[0].left - 10}).show();} else {    $('#pointer').css({top: rects[n].top + window.pageYOffset + 10,left: rects[n].right}).show();}
这是DEMO          总结       
以上是内存溢出为你收集整理的如何在javascript中向前或向后查找用户选择天气？全部内容，希望文章能够帮你解决如何在javascript中向前或向后查找用户选择天气？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1118978.html