Выделить страницу, удалив холст?

У меня есть странная проблема, и я действительно не знаю, как это объяснить. Когда вы нажимаете на холст и перемещаете его за пределы холста, то внезапно он выделяет всю страницу и выделяет ее синим цветом. Есть ли способ обойти это, даже делая изюминкой другой цвет, который является транспаретом? Или какой-то код, который решает это, или даже некоторый css?Выделить страницу, удалив холст?

Здесь страница для проверки или, чтобы понять меня! http://www.taffatech.com/Paint.html

и код:

<html> 
<head> 
<title>Paint</title> 

<script type="text/javascript" src="jspaint/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="jspaint/jquery-ui-1.10.3.custom.js"></script> 

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/dot-luv/jquery-ui.css" /> 
<script src="jspaint/Paint.js"></script> 

<script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 

<style type="text/css"> 
body { 
    background:#303030; 
} 
#canvas, #canvasCursor { 
    cursor: none; 
    background: #fff; 
    position: absolute; 
    left: 50px; 
    top: 30px; 
    z-index: 1; 
} 
#canvasCursor { 
    z-index: 20; 
    background: none; 
} 

#tabs { 

    background: #ffffff; 
} 
</style> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 


</head> 

<body style = "background:#303030;"> 
<br><br><br> 

<center><canvas id="canvasBg" width="1000px" height="600px" style=" position:absolute; left: 50; top: 30; z-index: 1; "></canvas></center> 

<canvas id="canvasCursor" width="1000px" height="600px"></canvas> 
    <canvas id="canvas" width="1000px" height="600px"></canvas> 


<div id="tabs" style=" position:absolute; left: 1070; top: 30; z-index: 1; "> 
    <ul> 
    <li><a href="#tabs-1">Paint</a></li> 
    <li><a href="#tabs-2">Shapes</a></li> 
    <li><a href="#tabs-3">Save/Submit</a></li> 
    <li><a href="#tabs-4">About</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Items relating to paint will be stored here</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Items relating to shapes will be here</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Save your image or submit it to the gallery!</p> 
    </div> 
    <div id="tabs-4"> 
    <p>Wayne Daly - 2013</p> 
    </div> 
</div> 

</body>  



</html>

источник

2013-06-15 Steven Barrett

Возможно, вы можете установить 'user-select' с помощью CSS при рисовании или вы можете попробовать прервать событие select select (fo r примеры, см. [здесь] (http://stackoverflow.com/questions/1224433/how-can-i-disable-highlighting-in-html-or-js)). – ComFreek

Все, что вам нужно, это немного user-select: none :)

Edit: Вы можете добавить код прямо в body и повторно включить для #tabs:

body { 
    background:#303030; 
    user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
} 

#tabs { 
    user-select: text; 
    -moz-user-select: text; 
    -webkit-user-select: text; 
    -ms-user-select: text; 
    background: #ffffff; 
}

источник

2013-06-15 21:23:47 dain

Где я должен помещать этот код? –

Выделить страницу, удалив холст?

ответ

Смежные вопросы